JQuery Table row .on("click" 查找是否单击了超链接或只是单击了行

Question

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

• 解析.js：1.4.2
• JQuery：1.11.2 和 1.10.3（用户界面）
• Twitter 引导程序：3.3.4

我用虚拟数据创建了这个 JSfiddle 来解释我正在寻找的内容：https ://jsfiddle.net/xuf7wy4x/1/

截至目前，如果我单击该行上的任何位置，则会触发 onclick 侦听器，但不会区分超链接。每当我单击行中的电子邮件超链接时，底部的对话框就会打开，并且默认的邮件程序（例如 Outlook）会同时打开，这很烦人。我想说的是“如果 onclick 捕获超链接，则不要打开对话框。否则，如果 onclick 中没有触及超链接，则打开对话框”。

我不知道如何区分一般点击和指向超链接的点击。非常感谢任何帮助！

以防万一，代码是：

超文本标记语言

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