javascript - How to ignore first event and skip to second? - Stack Overflow

admin管理员组

文章数量:1289539

I have a table-row that has a JavaScript action attached to mouse clicks anywhere inside the table row:

<tr onmousedown="someAction(this)">
    <td>cell 1</td>
    <td>cell 2</td>
    <td><a href="page2.html">cell 3</a></td>
</tr>

If a user clicks anywhere in the row, I want the JavaScript action, someAction(this), to be followed. However, if a user clicks on the link to page2, then I want the action ignored and the link followed.

Unfortunately, the action is being observed first, which happens to move the linked text's position just enough for the click to be dropped. In other words, the user cannot actually click on the link and go to page2, in this case.

How can I disable the mousedown action for clicks over the link?

Update: Based on the answers, I ultimately included the following JavaScript in the end of the HTML, which registered an event handler to stop propagation as suggested, like so:

...
<script type="text/javascript" language="javascript">
//<![CDATA[
function stopEvent(ev) {
    ev.stopPropagation();
}
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    links[i].addEventListener("onmousedown", stopEvent, false);
}
//]]>
</html>

This could have easily been included in the document's onload event, but the CDATA section was already required for other reasons, so I added what I needed here.

I have a table-row that has a JavaScript action attached to mouse clicks anywhere inside the table row:

<tr onmousedown="someAction(this)">
    <td>cell 1</td>
    <td>cell 2</td>
    <td><a href="page2.html">cell 3</a></td>
</tr>

If a user clicks anywhere in the row, I want the JavaScript action, someAction(this), to be followed. However, if a user clicks on the link to page2, then I want the action ignored and the link followed.

Unfortunately, the action is being observed first, which happens to move the linked text's position just enough for the click to be dropped. In other words, the user cannot actually click on the link and go to page2, in this case.

How can I disable the mousedown action for clicks over the link?

Update: Based on the answers, I ultimately included the following JavaScript in the end of the HTML, which registered an event handler to stop propagation as suggested, like so:

...
<script type="text/javascript" language="javascript">
//<![CDATA[
function stopEvent(ev) {
    ev.stopPropagation();
}
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    links[i].addEventListener("onmousedown", stopEvent, false);
}
//]]>
</html>

This could have easily been included in the document's onload event, but the CDATA section was already required for other reasons, so I added what I needed here.

• javascript
• dom-events

Share Improve this question Follow edited Jan 5, 2023 at 17:30 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 10, 2010 at 21:39 TrevorTrevor 1,66344 gold badges2323 silver badges3535 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

If you were using jQuery, it would be that simple (suppose you have set and id='row' for tr element, and id='link' for a element):

$('#row').click(someaction);
$('#link').click(function(event){event.stopPropagation()});

You can look at this example: http://jsfiddle/VDQMm/

Without jQuery, it is almost the same, but you have to get each element's handle first, then use addEventListener method to attach an event listener (make the row handler to use bubbling instead of capturing by setting the last parameter to false), and then the same old event.stopPropagation().

It would be something like this ( http://jsfiddle/VDQMm/2 ):

var row = document.getElementById('row');
var link = document.getElementById('link');
row.addEventListener('click',alert('clicked row!'),false)
link.addEventListener('click',function(event){event.stopPropagation()},false)

Add event.stopPropagation() to the mousedown event of the link. That will stop the event from bubbling up to the tr.

Here is an example.

本文标签： javascriptHow to ignore first event and skip to secondStack Overflow