阻止来自元素的点击事件，但不是来自<a> children</a>

Question

我的代码如下：

<div class="disabledClickevent">
  <ul>
    <li><a>link1</a></li>
    <li><a>link2</a></li>
  </ul>
</div>

div有一个点击事件，该事件被return false;禁用 我的问题是，这也会禁用<a>链接

Answer 1

 $(document).on('click','.disabledClickevent' function(e) {
   if( e.target !== this ) 
   //clicked out side
 return;    
    //clicked inside
});

Answer 2

我会这样做：

$(".disabledClickevent").on("click", ":not(a)", function(e) {
    //do stuff with your div
});

这会从点击事件中排除a。

Answer 3

可能是一个解决方案：

$('.disabledClickevent').on('click',function(e){
     if($(e.target).is(':not(a)'))
        return false;
});

或者将点击处理程序设置为链接：

$('.disabledClickevent a').click(function(e){
    e.stopPropagation();
});

Answer 4

你可以在jQuery中使用：not（）选择器

查看此链接http://api.jquery.com/not-selector/

希望这会有所帮助。

Answer 5

如果您不打算通过Javascript向页面添加新的“disabledClickevent”div，您可以这样做：

$('.disabledClickevent').click(function() {...});

或

$('.disabledClickevent').bind('click', function() {...});

仅将事件附加到已存在的div，而不进行任何类型的委托，因此链接将按照您的需要正常工作。

要明确的是，如果您计划在绑定事件时已经存在于页面上的所有“disabledClickevent”div，这只是一个可行的解决方案。