只启用mouseup事件内部的点击事件jquery

Question

我有ul标签里面div标签。我已申请mouseup事件div标记和click事件ul标记。

问题
每当我点击ul标签，那么这两个mouseup和click事件被触发。

我想要的是，当我点击ul标签，那么只有click事件应该触发，如果我在div标签做mouseup事件，那么只有mouseup事件应触发。

我的代码：
HTML：

<div class="m1"> 
    Nitin Solanki 
    <ul> 
     <li>one</li> 
     <li>two</li> 
    </ul> 
</div> 

JS：

$(document).on('mouseup', '.m1', function(){ 
    alert('div mouseup '); 
}); 

$(document).on('click', 'ul li', function(){ 
    alert("ul li- clicked"); 
}); 

JSFIDDLE

Answer 1

可以阻止事件的传播

$(document).on('mouseup', '.m1', function() { 
 
    alert('div mouseup '); 
 
}); 
 
$(document).on('mouseup', '.m1 ul', function(e) { 
 
    e.stopPropagation() 
 
}); 
 

 

 
$(document).on('click', 'ul li', function() { 
 
    alert("ul li- clicked"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="m1"> 
 
    Nitin Solanki 
 
    <ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    </ul> 
 
</div>

Answer 2

您可以使用jQuery的is()检查，如果点击的元素是一个div或者一个列表：

$(document).on('mouseup', '.m1', function(event){ 
    // Check if the clicked element is the div and not the list 
    if($(event.target).is('div')) 
     alert('div mouseup '); 
}); 

$(document).on('click', 'ul li', function(){ 
    alert("ul li- clicked "); 
}); 

Answer 3

这是一个奇怪的问题，作为一个“点击”实际上是一个鼠标松开的一部分。 点击包含一个mousedown，后跟一个mouseup在同一个元素上。

我认为你可以在这里做的唯一事情就是存储点击开始的时间，并向mouseup事件所依赖的变量添加一秒超时。

像这样。 （即使发布这个，我也觉得很肮脏）。

var clickStarted = false; 

$(document).on('click', 'ul li', function(){ 
    alert("ul li- clicked"); 
    clickStarted = false; 
}); 

$(document).on('mousedown', 'ul li', function(){ 
    clickStarted = true; 
    setTimeout(function(){ clickStarted = false; }, 1000);  
}); 

$(document).on('mouseup', '.m1', function(){ 
    if(!clickStarted) 
     alert('div mouseup '); 
}); 

JSFiddle

Answer 4

的原因是事件冒泡。您可以使用event.stopPropagation();

$(document).ready(function(){ 

     $("ul li").click(function(event){ 
      event.stopPropagation(); 
      alert("The ul li element was clicked."); 
     }); 

     $(".m1").click(function(){ 
      alert("The div element was clicked."); 
     }); 
    });