Question

我有一些我可以用.click（）函数选择的元素，它们会突出显示。上面有菜单，有一些动作。我想点击任何元素而不是菜单时取消高亮显示。

结构：

<body>
    <div id="menu">
    </div>
    <div id="elements">
        /* selectable elements here */
    </div>
</body>

可执行示例

$().ready(function(){
	$("#elements a").click(function(){
  	$(this).css('color', 'red');
  	return false;
  });
  $(document).click(function(e) {
    if ( $(e.target).closest('#menu').length === 0 ) {
        $("#elements a").css('color', 'blue');
    }
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
        <a href="#">Menu 1</a>
        <a href="#">Menu 2</a>
        <a href="#">Menu 3</a>
    </div>
    <div id="elements">
        <a href="#">Element 1</a>
        <a href="#">Element 2</a>
        <a href="#">Element 3</a>
    </div>
    <div>
      Click any element to highlight it. Click anywhere to reset highlighting. Click menu to keep highlighting.
    </div>

Jsfiddle

我试图绑定$("body *").not("#menu").click(...);，但是当我点击#menu时，身体的onclick事件也被解雇了，因为#menu是身体的孩子。

Answer 1

$(document).click(function(e) {
    if ( $(e.target).closest('#menu').length === 0 ) {
        // cancel highlighting 
    }
});

另一种解决方案是在#menu点击处理程序和元素点击处理程序的末尾调用stopPropagation()。这样，如果点击事件冒泡到文档对象，您就会知道菜单和元素都没有被点击，您可以安全地取消突出显示：

$('#menu').click(function(e) {
    // do stuff
    e.stopPropagation();
});

$('.element').click(function(e) {
    //do stuff
    e.stopPropagation();
});

$(document).click(function() {
    // cancel highlighting
});

Answer 2

为此编写自己的委托处理程序的另一种方法是使用Ben Almans“外部事件”插件来实现此目的。 ŠimeVidas提到了几乎相同的东西，但嘿 - 选择是件好事！

http://benalman.com/projects/jquery-outside-events-plugin/

这样的事情

$('#menu').bind("clickoutside", function(){
    // cancel highlighting
})

Answer 3

您应该在click处理body事件，然后检查$.contains($('#menu'), e.target)。

Answer 4

.closest 会传播并检查其中一个父母是否是无法点击的元素。

$(document).on('click', '.clickable_parent', function(e){
  if(e.target.closest(".UnClickable_child") === null){
   //do stuff
  }
});

Answer 5

$("body *:not(body #menu)").click()

不知道这是否有效，我不在我的电脑上......

JQuery：点击无处不在但有些元素

5 个答案: