只啓用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."); 
     }); 
    });