Some dataSome data
All geek questions in one place

How to disable onclick element of parent element

I had a table with tr like

<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>

How to achieve this?

+4
source share
3 answers

You need to stop the bubble of events .

Note

Make 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(); }); });
+3
source 
 <td><button onclick="doprocess2(event);"</td> function doprocess2(evt) { evt.stopPropagation(); evt.preventDefault(); // your existing code goes here }

This works in Firefox, Chrome and IE9. Not sure about older versions of IE where the event object is not being passed. (Use window.event instead).

+2
source

There are several ways to do this. In your case, the simplest is probably the following:

define doprocess2 as follows:

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

and name it as follows:

 onclick="doprocess2(event);"

This will work in all modern browsers, as well as ie6, ie7 and ie8

Here is an example:

 <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>
+2
source

Source: https://habr.com/ru/post/1335204/

More articles:


All Articles