首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >检测html元素中的用户选择

检测html元素中的用户选择
EN

Stack Overflow用户
提问于 2012-05-30 11:36:28
回答 2查看 1.8K关注 0票数 5

如何检测用户选择(用鼠标突出显示)是否在某个元素的子元素内/子元素内?

示例:

代码语言:javascript
复制
<div id="parent">
   sdfsdf
   <div id="container">
       some 
      <span>content</span>
   </div>
   sdfsd
</div>

伪代码:

代码语言:javascript
复制
if window.getSelection().getRangeAt(0) is a child of #container
 return true;
else
 return false;
EN

回答 2

Stack Overflow用户

发布于 2012-05-30 11:41:03

使用jQuery on() event handler

代码语言:javascript
复制
$(function() {
     $("#container > * ").on("click", 
         function(event){
            return true;
         });
     });​

编辑: http://jsfiddle.net/9DMaG/1/

代码语言:javascript
复制
<div id="parent">outside
    <div id="container">
        outside
        <span>first_span_clickMe</span>
        <span>second_span_clickMe</span>
    </div>
 outside</div>


$(function() {
   $("#container > span").on("click", function(){
       $('body').append("<br/>child clicked");
   });
});​

票数 2
EN

Stack Overflow用户

发布于 2014-05-10 02:54:22

好吧,我设法以一种“肮脏”的方式解决了这个问题。代码可以使用改进,但它为我做了工作,我现在懒得改变它。基本上,我循环遍历selection的对象,检查它是否在某个点到达具有指定类的元素。

代码语言:javascript
复制
    var inArticle = false;
    // The class you want to check:
    var parentClass = "g-body"; 

    function checkParent(e){
        if(e.parentElement && e.parentElement != $('body')){
            if ($(e).hasClass(parentClass)) {
                inArticle = true;
                return true;
            }else{
                checkParent(e.parentElement);
            }
        }else{
            return false;
        }
    }


    $(document).on('mouseup', function(){
        // Check if there is a selection
        if(window.getSelection().type != "None"){
            // Check if the selection is collapsed
            if (!window.getSelection().getRangeAt(0).collapsed) {
                inArticle = false;

                // Check if selection has parent
                if (window.getSelection().getRangeAt(0).commonAncestorContainer.parentElement) {
                    // Pass the parent for checking
                    checkParent(window.getSelection().getRangeAt(0).commonAncestorContainer.parentElement);
                };


                if (inArticle === true) {
                    // If in element do something
                    alert("You have selected something in the target element");
                }
            };
        }
    });

JSFiddle

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10809682

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档