JQuery表行.on（“点击”查找是否单击了超链接或只是行

Question

我正在开发一个包含以下库的站点：

• Parse.js：1.4.2
• JQuery：1.11.2和1.10.3（UI）
• Twitter Bootstrap：3.3.4

我用虚拟数据创建了这个JSfiddle来解释我在寻找什么： https ：//jsfiddle.net/xuf7wy4x/1/

目前，如果我单击行中的ANYWHERE，onclick侦听器将触发，但不会区分超链接。 每当我点击我的行中的电子邮件超链接时，底部的对话框就会打开，默认的邮件程序（例如outlook）会同时打开，这很烦人。 我想要的是“如果onclick捕获一个超链接，不要打开对话框。否则如果在onclick中没有触摸超链接，打开对话框”。

我不知道如何区分一般点击和一个指向超链接的点击。 任何帮助真的很感激！

以防万一，代码是：

HTML

<div class="container">
                <div class="row">
                    </div>
                    <div class="col-xs-6 table-responsive peoplelist" id="peoplelist">
                    <h3>People within the bowl  <small><i>Hint:</i> click on the rows to edit or delete them</small></h3>
                        <table class="table table-striped table-hover bowlsetting">
                            <thead>
                                <tr>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Role</th>
                                    <th>Email</th>
                                    <th>School</th>
                                </tr>
                            </thead>
                            <tbody id="bowsettingsbody">
                                <tr class="bowsettingperson">
                            <td> firstName </td>
                            <td> lastName </td>
                            <td> role</td>
                            <td><a href="mailto:mystu@gmail.com?Subject=Ethics Bowl:&body=body" target="_top">mystu@gmail.com</a></td>
                            <td> school </td>
                        </tr>
                                <tr class="bowsettingperson">
                            <td> firstName </td>
                            <td> lastName </td>
                            <td> role</td>
                            <td><a href="mailto:mystu@gmail.com?Subject=Ethics Bowl:&body=body" target="_top">mystu@gmail.com</a></td>
                            <td> school </td>
                        </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

JS

// row on-click listener
$("#peoplelist tbody").on("click", "tr", function(e){

    // TODO: figure out a way to single out the email hyperlinks

    // set up an array to hold the row's data. Need to clear every time
    var bowl_setting_row_data = [];    

       // locate the current row you're on and push the data into the array.
    $('td', $(this).closest('tr')).each(function()
    {
        bowl_setting_row_data.push($(this).text());
    });

    // this is another part of the code which does not concern what I'm looking for
    //$('#dialog_bowl_setting_initial_dialog').dialog('open');  
});

Answer 1

使用event.target并检查其tagName

// row on-click listener
$("#peoplelist tbody").on("click", "tr", function(e){

    if(e.target.tagName == 'A'){
        return;
    }

    // set up an array to hold the row's data. Need to clear every time
    var bowl_setting_row_data = [];    

       // locate the current row you're on and push the data into the array.
    $('td', $(this).closest('tr')).each(function()
    {
        bowl_setting_row_data.push($(this).text());
    });

    // this is another part of the code which does not concern what I'm looking for
    //$('#dialog_bowl_setting_initial_dialog').dialog('open');  
});

Answer 2

在超链接上捕获事件并阻止其冒泡。

$("#peoplelist tbody").on("click", "tr a", function (e) {
    e.stopPropagation();
});

Answer 3

您也可以直接检查是否存在href 。

更新小提琴

// row on-click listener
$("#peoplelist tbody").on("click", "tr", function(e){

    if (e.target.href){
        return;
    }

    // TODO: figure out a way to single out the email hyperlinks

    // set up an array to hold the row's data. Need to clear every time
    var bowl_setting_row_data = [];    

       // locate the current row you're on and push the data into the array.
    $('td', $(this).closest('tr')).each(function()
    {
        bowl_setting_row_data.push($(this).text());
    });

    // this is another part of the code which does not concern what I'm looking for
    //$('#dialog_bowl_setting_initial_dialog').dialog('open');  
});