In a needs to – freedomn-mSep 28 '21 at 10:49

1 Answers1

1

A solution that doesn't use the 'stopPropagation' event:

<head> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> </head> <body> <table border=1> <thead> <th></th> <th>Name</th> <th>ID</th> <th>Active</th> </thead> <tbody> <tr> <td class='disableClick'>click me</td> <td>XXXXXXXXXX</td> <td>001</td> <td>True</td> </tr> </tbody> </table> </body> <script> $(document).ready(function() { $("td:not(.disableClick)").click(function() { alert("Click 1"); //window.location.href = '/xxx/bbb/001'; }); $("td.disableClick").click(function() { alert("Click 2"); //window.location.href = '/xxx/bbb/001'; }); }); </script>

answered Sep 28 '21 at 11:30
Dani

1,825

2

15

29

functionality to work and not redirect URL

Asked Sep 28 '21 at 10:33

Active Sep 28 '21 at 11:30

Viewed 53 times

0

I am facing a issue in a `<table>`

I have a table row which having a Redirect URL and only one table data `<td>` having different functionality

`<table> <thead> <th></th> <th>Name</th> <th>ID</th> <th>Active</th> </thead> <tbody> <tr type="button" onclick="window.location.href = '/xxx/bbb/001';"> <td id="dtr-control"></td> <td>XXXXXXXXXX</td> <td>001</td> <td>True</td> </tr> </tbody> </table>`

in the above html, `<tr>` will act like a link and the first `<td>` having its own functionality like click on the first it will list the other options/controls of the table, it is working fine but also it is redirecting to the page which is defined in the `<tr>`.

If I click first `<tr>` it should list the options and if I click rest of the row it should redirect me to other page.

How to stop only the parent functionality?

Thanks in Advance.

javascript html jquery asp.net material-design

asked Sep 28 '21 at 10:33
Gokul Kannan

53

2

14

2

I understand that this is your requirement, but for the sake of following good practices, you should come up with a better html/design. – Sang Suantak Sep 28 '21 at 10:40

You'll probably need some JS to do this, like using [`Event.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault), but I agree with @Sang here. – DavidG Sep 28 '21 at 10:43

Does this answer your question? [How to stop event propagation with inline onclick attribute?](https://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute) – freedomn-m Sep 28 '21 at 10:47

`
` works in Chrome, but may not work in other browsers https://jsfiddle.net/1s4gfjhd/ But, as above, `return false` from the click handler would have the same effect

Question

I am facing a issue in a <table>

I have a table row which having a Redirect URL and only one table data <td> having different functionality

<table>
    <thead>
        <th></th>
        <th>Name</th>
        <th>ID</th>
        <th>Active</th>
    </thead>
    <tbody>
        <tr type="button" onclick="window.location.href = '/xxx/bbb/001';">
            <td id="dtr-control"></td>
            <td>XXXXXXXXXX</td>
            <td>001</td>
            <td>True</td>
        </tr>
    </tbody>
</table>

in the above html, <tr> will act like a link and the first <td> having its own functionality like click on the first it will list the other options/controls of the table, it is working fine but also it is redirecting to the page which is defined in the <tr>.

If I click first <tr> it should list the options and if I click rest of the row it should redirect me to other page.

How to stop only the parent functionality?

Thanks in Advance.

I understand that this is your requirement, but for the sake of following good practices, you should come up with a better html/design. — Sang Suantak, Sep 28 '21 at 10:40
You'll probably need some JS to do this, like using [`Event.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault), but I agree with @Sang here. — DavidG, Sep 28 '21 at 10:43
Does this answer your question? [How to stop event propagation with inline onclick attribute?](https://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute) — freedomn-m, Sep 28 '21 at 10:47

score 1 · Accepted Answer · answered Sep 28 '21 at 11:30

A solution that doesn't use the 'stopPropagation' event:

<head>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"> </script>
</head>
<body>
    <table border=1>
        <thead>
            <th></th>
            <th>Name</th>
            <th>ID</th>
            <th>Active</th>
        </thead>
        <tbody>
            <tr>
                <td class='disableClick'>click me</td>
                <td>XXXXXXXXXX</td>
                <td>001</td>
                <td>True</td>
            </tr>
        </tbody>
    </table>
</body>


<script>
    $(document).ready(function() {
        $("td:not(.disableClick)").click(function() {
                 alert("Click 1");
             //window.location.href = '/xxx/bbb/001';
        });
        $("td.disableClick").click(function() {
                 alert("Click 2");
             //window.location.href = '/xxx/bbb/001';
        });
    });
</script>