ink*_*ink 14 javascript jquery click css-selectors
我有一些我可以用.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>我试图绑定$("body *").not("#menu").click(...);但是当我点击#menu然后身体的onclick事件也被解雇了因为#menu是身体的孩子.
Šim*_*das 37
$(document).click(function(e) {
if ( $(e.target).closest('#menu').length === 0 ) {
// cancel highlighting
}
});
另一种解决方案是stopPropagation()在#menu点击处理程序和元素点击处理程序的末尾调用.这样,如果点击事件冒泡到文档对象,您就会知道菜单和元素都没有被点击,您可以安全地取消突出显示:
$('#menu').click(function(e) {
// do stuff
e.stopPropagation();
});
$('.element').click(function(e) {
//do stuff
e.stopPropagation();
});
$(document).click(function() {
// cancel highlighting
});
| 归档时间： |
|
| 查看次数： |
13629 次 |
| 最近记录： |