logo标签列表

JQuery 点击事件内跟随链接

jquery
5

我在<td>中嵌入了链接，但是我也想在所有的<td>上添加点击事件。代码如下：

$( document ).ready( function() {
    $( 'td.event' ).click( function() {
        var eventName = prompt( 'Enter event:' );
        if ( eventName != null && eventName.length > 0 ) {
            window.location = '?event=' + eventName;
        }
    } );
} );

我想让用户点击链接时直接跟随链接而不弹出弹窗，但是如果用户在 <td> 区域内的其他地方点击，则会弹出弹窗。在 JQuery 中是否可能实现这一功能？

你尝试过通过JQuery在所有a元素上定义click事件吗？ - Duane Gran
4个回答
3
请将以下内容添加到您的document.ready处理程序的末尾：
$( 'td.event a' ).click( function(e) {
    e.stopPropagation();
} );
脚本似乎在使用此代码时没有任何不同的行为。事件是从最内层元素向外传播还是从最外层元素向内传播？ - Sean Kelleher
应该可以工作。你把这个放在了 document.ready 处理程序里面吗？它应该在那个处理程序里面。在jsfiddle上查看演示。 - bfavaretto
抱歉，它没有起作用，我刚刚发现我将 stopPropagation() 拼写为 stopPropogation()，这导致脚本默默失败。感谢您的时间和耐心。 - Sean Kelleher
没问题。回答你的问题：是的，它会从最内层元素向上DOM树传播。这被称为“事件冒泡”。 - bfavaretto
3
function yourFunction()
{
   var eventName = prompt( 'Enter event:' );

   if(eventName != null && eventName.length > 0) {
      window.location = '?event='+eventName;
   }
}

$('td').click(function() {
   yourFunction();
});

$('td a').click(function() {
   window.location = $(this).attr('href');
});

应该能解决问题。
当您单击链接时，它会跟随该链接，但提示仍然出现。是否有一种方法可以在单击链接时抑制提示？ - Sean Kelleher
0

这可能会有帮助。

$("td.event a").click(function(e){
  e.stopPropagation();
});
0

这应该可以了。

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function() {
            $("td").click(function(event){
                if(!event.isPropagationStopped()) {
                    var eventName = prompt("Enter event: ");
                    if(eventName != null && eventName.length > 0) {
                        window.location = "?event=" + eventName;
                    }
                }
            });
            $("a").click(function(event){
                event.stopPropagation();
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td style="background-color: grey; width: 100px; height: 20px;">
                <a href="http://www.google.be">google</a>
            </td>
        </tr>
    </table>
</body>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接