的JavaScript不是做功能

我有以下的div結構： -的JavaScript不是做功能

<div id="a" onclick="function1();"> 
<div id="b"> 
</div> 

<div id="c"> 
</div> 
</div>

當然，點擊「是」將觸發功能1（），因爲「B」和「C」都位於內「一」，當點擊「b」或「c」時，也會觸發function1（）。

實際上，我不想在點擊「b」時觸發function1（）。我試圖用z-index使「b」超出「a」，但它沒有幫助。

我正在尋找一種方式，是類似於： - 你必須看事件的目標

<div id="b" onclick="function1() return false"></div>

來源

2013-07-13 user2122657

檢查['event.target']（https://developer.mozilla.org/en-US/docs/Web/API/event.target）？ –

您可以在b和c上使用event.stopPropagation（），單擊事件函數以防止調用function1（）。 –

@Mohit Pandey：這確實是我的解決方案。 –

。

隨着你的HTML：

<div class="a"> 
    <div class="b">Hello</div> 
    <div class="c">World</div> 
</div>

您可以使用此Javascript（jQuery的）：

$('.a').on('click', function(event){ 
    var $target = $(event.target); 
    if($target.is('.a')){ 
    alert('You actually clicked .a'); 
    } else { 
    alert('You did not click .a'); 
    } 
});

這裏有一個快速演示使用jQuery。

http://jsbin.com/ijinuz/1/edit

來源

2013-07-13 16:52:48

你可以通過設置爲onclick功能通過event，並檢查是否event.target.id !== "b"可能做到這一點：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>asdf</title> 
    </head> 
    <body> 
     <div id = "a" onclick = "doSomething(event);"> 
      div "a" 
      <div id = "b"> 
       div "b" 
      </div> 
      <div id = "c"> 
       div "c" 
      </div> 
     </div> 


     <script type = "text/javascript"> 
      function doSomething(e) { 
          if (e.target.id !== "b") { 
           alert(e.target.id); 
          } 
      } 
     </script> 
    </body> 
</html>

這裏是jsfiddle。

來源

2013-07-13 17:03:57

簡單：

$('#a').children().on('click', function(event) { 
    event.stopPropagation(); 
});

這裏有一個演示Fiddle。

來源

2013-07-13 17:05:26

+1這非常有用！ –

的JavaScript不是做功能

回答

相關問題