1

我正在尝试选择整个 div，但不是主 div 内的特定 div。示例如下：

<div id="main_holder">
   <div id="secondHolder">
      <div id="thirdHolder">
         <div id="divIdoNotWantToUse" class="notUsed"></div>
      </div>
   </div>
</div>

我正在尝试简单的单击以查看当我单击 div 时，它不应该收到警报。

$('#main_holder').not('#main_holder.notUsed').click( function(event) {
    alert( 'pullmenu clicked' );
});

它不起作用，那么最好的方法是什么？有没有办法在非选择器中使用 find ？

这有效的例子：

$('#main_holder').find('#divIdoNotWantToUse').css({ border: '5px solid red' });

Arun的解决方案：

$('#main_holder').click( function(event) {
    if(!$(event.target).closest('.notUsed').length)
    {
        alert( 'pullmenu clicked' );
    }
});
4

4 回答 4

2

在没有空格的选择器中添加一个空格，选择#main_holder.notUsed器会查找具有 idmain_holder和类的元素，而不是类中notUsed的元素。main_holdernotUsed

$('#main_holder').not('#main_holder .notUsed').click( function(event) {
    alert( 'pullmenu clicked' );
});

这种方法的问题在于，即使从事件中删除了 click 事件处理程序，.notUsed仍然会传播到周围div的 s ，从而导致警报触发。最好有条件地检查目标，然后决定是停止还是允许传播。

$('#main_holder').click( function(event) {
    if(!$(event.target).is(".notUsed")){
        alert( 'pullmenu clicked' );
    }
});

工作示例：http: //jsfiddle.net/xBctQ/

于 2013-04-01T09:10:57.273 回答
2

我可以在您的标记中看到一个错误：

<div id="thirdHolder>
   //--------------^---------a closing " required

虽然这不是一个大问题，但您需要在标记中添加文字才能看到点击的效果：

<div id="main_holder">Used
   <div id="secondHolder">Used
      <div id="thirdHolder">Used
         <div id=" divIdoNotWantToUse " class="notUsed">Not Used</div>
      </div>
   </div>
</div>

如果这得到纠正，那么你可以试试这个脚本：

$('#main_holder').children().click( function(event) {
    alert( 'pullmenu clicked' );
});
$('#main_holder .notUsed').click( function(event) {
    event.stopPropagation();
});

您可以通过 停止事件冒泡.stopPropagation()。

在 FIDDLE 中查找

于 2013-04-01T09:25:39.757 回答
1

你可以简单地这样做：

$('#main_holder').click(function (event) {
    alert('pullmenu clicked');
});

$('#divIdoNotWantToUse').click(function (event) {
    event.stopPropagation();
});

在这里演示

于 2013-04-01T09:18:07.780 回答
1

尝试

$('#main_holder').click( function(event) {
    if(!$(event.target).closest('.notUsed').length){
        alert( 'pullmenu clicked' );
    }
});

演示：菲德尔

于 2013-04-01T09:57:32.237 回答