2011-01-12 6 views
4

나는 tr와 테이블을 가지고부모 요소의 onclick 요소 비활성화 방법

처럼
<tr onclick="doprocess1()"> 
    <td>Some data</td> 
    <td>Some data</td> 
    <td><button onclick="doprocess2()"</td> <!--I want to disable the clickevent of the <tr> here --> 
</tr> 

어떻게 이것을 달성? 전문가 plz 도움말

답변

2
<td><button onclick="doprocess2(event);"</td> 

function doprocess2(evt) { 

    evt.stopPropagation(); 
    evt.preventDefault(); 

    // your existing code goes here 
} 

이것은 Firefox, Chrome 및 IE9에서 작동합니다. "이벤트"개체가 전달되지 않는 IE의 이전 버전에 대해서는 확실하지 않습니다. 대신 window.event를 사용하십시오.

3

event bubbling을 중지해야합니다.

는 확인이 unobtrusive

<tr id="tr1"> 
    <td>Some data</td> 
    <td>Some data</td> 
    <td><button id="bt1">Click</button></td> <!--I want to disable the clickevent of the <tr> here --> 
</tr> 


$(function(){ 
    $("#tr1").click(function(){ 
    }); 
    $("#bt1").click(function(e){ 
     e.stopPropagation(); 
    }); 
}); 
2

이 작업을 수행하는 방법에는 여러 가지가 있습니다.

function doprocess2(e) { 
    e.stopPropagation && e.stopPropagation() || (e.cancelBubble = true); 
    ... 
} 

과 같이 호출 :

같이 doprocess2 정의 :

onclick="doprocess2(event);" 

이 또한 6으로 모든 최신 브라우저에서 작동합니다 귀하의 경우 가장 쉬운에서 은 다음 아마도 , ie7 & ie8

다음은 유용한 예제입니다.

<html> 
<head> 
<script> 
function doprocess1() { alert('tr'); } 
function doprocess2(e) { 
    e.stopPropagation && e.stopPropagation() || (e.cancelBubble = true); 
    alert('td'); 
} 
</script> 
</head> 
<body> 
<table> 
<tr onclick="doprocess1();"> 
    <td>click tr</td> 
    <td><button onclick="doprocess2(event);">click td only</button></td> 
</tr> 
</table> 
</body> 
</html> 
관련 문제