Question

我在<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中吗？

Answer 1

将此添加到document.ready处理程序的末尾：

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

Answer 2

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');
});

应该这样做。

Answer 3

它可能会有所帮助。

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

Answer 4

这应该这样做。

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

关注JQuery click事件中的链接

4 个答案: