模擬與javascript的onclick事件

我想要做的是把div中的圖像按鈕比按鈕本身更寬，當外部的div被點擊時，我想調用圖像按鈕onclick（）函數。我期望從下面的HTML代碼是，當我點擊按鈕本身，它應該只警告「按鈕點擊」。當我點擊外部div時，它應該首先警告「div點擊」，然後點擊「按鈕」。問題是，當我點擊div時，它會發出警告：「div點擊」，然後「按鈕點擊」，然後再按「div點擊」按順序。當我點擊按鈕，它會提示：「點擊按鈕」，然後「div點擊」，然後「點擊按鈕」，然後「div點擊」。模擬與javascript的onclick事件

我找不到我在這裏失蹤，有幫助嗎？

<html> 
<body> 
    <div style="width: 200px; border: 1px solid red;" onclick="alert('div clicked');(document.getElementById('addButton')).click();"> 
     <input type="button" onclick="alert('button clicked');" 
      id="addButton"/> 
    </div> 
</body> 
</html>

來源

2012-05-31 Use the fork Luke

我們看一些代碼，請。 – CroiOS

抱歉，代碼格式錯誤，現在編輯。 –

http://stackoverflow.com/questions/2364629/jquery-stop-child-triggering-parent-event - 可能的重複 – Onheiron

你已經錯過了什麼是事實，某些事件冒泡文檔樹觸發父元素的所有點擊處理程序。要停止它，請在事件對象上調用stopPropagation。

<input type="button" onclick="event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);alert('button clicked');" 
     id="addButton"/>

（舊IE沒有stopPropagation，你需要設置event.cancelBubble =真）

來源

2012-05-31 08:16:41 Rafael

使用window.event.stopPropagation（）;像

來源

2012-05-31 08:17:55 rt2800

在Internet Explorer中，你可以簡單地做

myElement.click();

然而，W3標準是更復雜一點。下面的代碼應該支持其他瀏覽器：

var evt = document.createEvent("HTMLEvents"); 
evt.initEvent("click", true, true); 
myElement.dispatchEvent(evt);

另見這個問題：How can I simulate a click to an anchor tag?

來源

2012-05-31 08:24:39 user2428118

你需要避免的事件冒泡從Javascript像所以：

<html> 
<body> 
    <script type="text/javascript"> 
     function clickOnDiv(e){ 
      alert('Div clicked.'); 
      document.getElementById('addButton').click(); 
      e.preventDefault(); 
      return false; 
     } 

    function clickOnButton(e){ 
     e.preventDefault(); 

     // This line to prevent event bubbling 
     e.stopPropagation() ? e.stopPropagation() : (e.cancelBubble=true); 

     alert('Button clicked.'); 
     return false; 
    } 


    </script> 
    <div id='maDiv' style="width: 200px; border: 1px solid red;"> 
     <input type="button" value="Click Me !" id="addButton"/> 
    </div> 
    <script> 
     (function(){ 
      document.getElementById('addButton').onclick = clickOnButton; 
      document.getElementById('maDiv').onclick = clickOnDiv; 
     })(); 
    </script> 
</body> 
</html>

測試.. :)

來源

2012-05-31 08:37:47 pad31

此外，我重構您的代碼，以便它將更符合DOM Event model level 2 .. – pad31

模擬與javascript的onclick事件

回答

相關問題