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

问题描述 投票:13回答:5

我有一些我可以用.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是身体的孩子。

javascript jquery click css-selectors
5个回答
34
投票
$(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
});

2
投票

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

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

所以这样的事情

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

1
投票

你应该在click上处理body事件,然后检查是否$.contains($('#menu'), e.target)


1
投票

.closest将传播并检查其中一个父母是否是不可点击的元素。

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

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

不知道这是否有用,我不在我的电脑上......

© www.soinside.com 2019 - 2024. All rights reserved.