Question

所以我需要点击一个文档来调用一些函数，但问题是当我点击某个想要它的元素时没有反应，所以代码：

<body>

<div class="some_element">
some element
</div>



</body>

和js：

$(document).click(function(){

   //something to happen

})

现在，如果我点击带有class =“some_element”的div，将调用document.click事件，但是我只需要在单击文档时调用该事件.....或者有可能使这个元素成为例外吗？

更详细：

$('#forma').click(function(e){

    e.stopPropagation();

    $('#assignment_type_list').slideUp();


})

让我们说#forma - 它是那些元素的父元素，所以当我点击页面时我想要滑动someElement并且：

$('#assignment_type_select, #assignment_type_label').click(function(){

        $('#assignment_type_list').slideToggle();



    })

这是单击它们时切换另一个元素的元素，但问题是当我点击这些元素时$('#forma').click - 也会执行，因为它的父元素和e.stopPropagation() - 没有不帮忙

Answer 1

所有这些stopPropagation内容都是正确的，但这会导致您的脚本在某个浏览器的旧版本上抛出错误。猜猜哪一个？跨浏览器方式：

$('#elem').click(function(e)
{
    e = e || window.event;//IE doesn't pass the event object as standard to the handler
    //event would normally work, but if you declared some event variable in the current scope
    //all falls to pieces, so this e || window.event; thing is to be preferred (IMO)
    if (e.stopPropagation)//check if method exists
    {
        e.stopPropagation();
        return;
    }
    e.cancelBubble = true;//for IE
});

但是，您想要检查实际点击的元素是否是您需要的元素。问题是，事件通过DOM传递的方式。在W3C浏览器中，事件首先传递给文档，然后向下记住实际单击的元素（通过dom传播）。
相比之下，IE会在元素本身上调度它的事件，然后将其发送到文档（除了由select元素触发的change事件...以增加对伤害的侮辱）。这实际上意味着在W3C浏览器中注册到body元素的点击事件可能正在进入各种类型的复选框，或者它可能是空div中的单击。再次，在IE中，当点击事件到达body标签时，它也可能已被调度到页面上的任何元素。因此，对于您的情况，谷歌可能会有用：event delegation，或转向jQuery的.delegate()方法。

或者检查事件对象以查看是否允许事件传播：

var target =  e.target || e.srcElement;//target now holds a reference to the clicked element

属性名称巧妙地显示了冒泡模型和传播模型之间的区别：在第一种情况下（srcElement），事件来自dom中的源元素。在W3C传播模型中，事件是正确的，而它正朝着dom中的某个target元素前进。在目标被击落后，看起来就像一个寻热导弹（w3c）与一阵阵碎片（IE，总是破坏性的，在这种情况下往往是为了对事件作出反应，因此迟到处理它们：P）

Answer 2

一种方法是检查event的{{1}}。

target

这是一个有效的fiddle

Answer 3

文档中的元素是文档的一部分，因此如果单击文档中的“some_element”，很明显将触发/触发在文档上注册的事件。如果您不想执行“document”的代码，那么首先获取源自此事件的元素OR“event source”，并检查上述问题中是否为“some_element”。

如何在不触及某些元素的情况下附加document.click事件？

3 个答案: