Jquery 嵌入在可单击行项目中的电子邮件链接

我有一个行项目，当点击它时，它将调用一个函数，将我引导到另一个页面，但行项目中有一个电子邮件地址链接。但当我点击电子邮件链接时，它会重定向我，就像我点击了行项目的任何其他部分一样。如何更改此设置，使电子邮件链接将启动电子邮件客户端，但行项目的其余部分将重定向

<li data-bind="click: $parent.UserInfo">
    <table>
        <tr class="colleague">
            <td>
                <img src="./images/default.gif"/>
            </td>
            <td>
            <table width="100%">                            
                <tr><td><span class="firstname_" data-bind="text: firstname"></span>&nbsp;<span data-bind="text: lastname"></span></td></tr>
                <tr><td><a data-bind="text: email, attr: { href: 'mailto:'+email} "></a></td></tr>
                <tr><td><span data-bind="text: phone"></span></td></tr>
                <tr><td><span>Location: </span><span data-bind="text: location"></span></td></tr>
            </table>
        </td>
    </tr>
</table>
</li>

地点：

在这方面，Knockout提供了两个概念可以帮助您

如果您有一个

单击

（或通过

事件

绑定的特定事件），则可以包括一个附加选项，该选项的事件名称后跟

气泡

，并将其设置为false。因此，您可以：

data-bind="click: someAction, clickBubble: false"

其次，如果从

单击

绑定（或

事件

绑定）调用的处理程序返回

true

，则它将允许默认操作继续进行

因此，一个选项是添加一个

单击

绑定，该绑定使用一个函数将

true

返回到您的内部链接，然后还添加一个

单击气泡：false

。比如说：

<td><a data-bind="text: email, attr: { href: 'mailto:'+email}, click: alwaysTrue, clickBubble: false"></a></td>

样本：

或者在不包装现有绑定的情况下更高效地执行我们想要的操作：

ko.bindingHandlers.preventBubbleButAllowDefaultAction = {
    init: function(element, valueAccessor) {
        if (ko.utils.unwrapObservable(valueAccessor())) {
            ko.utils.registerEventHandler(element, "click", function() {
                event.cancelBubble = true;
                if (event.stopPropagation) {
                    event.stopPropagation(); 
                }              
            });
        }  
    }        
};

样本：

ko.bindingHandlers.preventBubbleButAllowDefaultAction = {
    init: function(element, valueAccessor) {
        if (ko.utils.unwrapObservable(valueAccessor())) {
            ko.utils.registerEventHandler(element, "click", function() {
                event.cancelBubble = true;
                if (event.stopPropagation) {
                    event.stopPropagation(); 
                }              
            });
        }  
    }        
};