按鈕裏面的錶行TR，當單擊按鈕時只做按鈕動作

點擊我想要它做的A.

按鈕時，點擊我想要它做的B.

我試圖阻止傳播行時，在一個點是工作，但我不知道我沒有做什麼，我無法再讓它再次運作。

也許有更好的方法來做到這一點。

我有一個小提琴http://jsfiddle.net/sebababi/YJ6eG/

function stopEvent(ev) { 
    ev.stopPropagation(); 
    alert("event propagation halted."); 
} 
function stopPropagation(elem) { 
    elem = document.getElementById("row1"); 
    elem.addEventListener("click", stopEvent, true); 
}

來源

2014-01-25 Sebastian

檢查我的答案，讓我知道你是否有任何問題。 –

我改變了你這樣的代碼：

<table id="ID_to_Stop"> 
    <tr id="row1" onclick="alert('row 1 clicked');"> 
     <td id="c12">this is row 1, if you click it, it should do something 
      <button id="btn1">and if you click me I should do something different</button> 
     </td> 
    </tr> 
    <tr id="row2" onclick="alert('row 2 clicked');"> 
     <td id="c22">this is row 2 
      <button id="btn2">click me</button> 
     </td> 
    </tr> 
</table>

和JS部分：

var btn1 = document.getElementById("btn1"); 
var btn2 = document.getElementById("btn2"); 

btn1.addEventListener("click", function (ev) { 
    alert('btn 1 clicked'); 
    ev.stopPropagation(); 
}, true); 

btn2.addEventListener("click", function (ev) { 
    alert('btn 2 clicked'); 
    ev.stopPropagation(); 
}, true);

，這是你更新DEMO。

來源

2014-01-25 15:56:33

非常感謝，梅赫蘭，它完美的作品。只有一個問題是什麼是「ev」。在「stopPropagation（）;」之前對於？我從另一個代碼得到了這個。 – Sebastian

無論何時觸發事件，瀏覽器都會創建一個Event對象，讓您獲得所需的關於該事件的所有信息，例如，如果您有一個單擊事件，只要它與Mouse有關，則瀏覽器會創建一個MouseEvent，它具有所有關於觸發事件的信息，位置，實際目標DOM元素等等'ev'在這裏是一個MouseEvent，其中包含所有關於html元素實際點擊的相關信息。 –

謝謝梅赫蘭，現在非常清楚，非常感謝。 – Sebastian

如果在某些情況下工作，您的代碼不工作although.And，這將只允許單一的點擊，像殺事件上排ROW1。使用如下代碼來獲得期望的結果。

HTML： -

<table id="ID_to_Stop"> 
<tr id="row1" onclick="alert('row 1 clicked');"> 
    <td id="c12">this is row 1, if you click it, it should do something 
     <button id="btn1" onclick="btn1Call(event);">and if you click me I should do something different</button> 
    </td> 
</tr> 
<tr id="row2" onclick="alert('row 2 clicked');"> 
    <td id="c22">this is row 2 
     <button id="btn2" onclick="btn2Call(event);">click me</button> 
    </td> 
</tr>

的javascript： -

<script> 

function btn1Call(e) { 
    alert('btn 1 clicked'); 
    e.stopPropagation(); 
} 

function btn2Call(e) { 
    alert('btn 2 clicked'); 
    e.stopPropagation(); 
} 
</script>

來源

2014-01-25 16:53:08

按鈕裏面的錶行TR，當單擊按鈕時只做按鈕動作

回答

相關問題