Question

我有一个订单项，点击后会调用一个指引我到另一个页面的功能，但在订单项中是一个电子邮件地址链接。但是，当我点击电子邮件链接时，它会重定向我，就像我点击了订单项的任何其他部分一样。如何更改此设置，以便电子邮件链接显示电子邮件客户端，但订单项的其余部分将重定向？

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

Answer 1

Knockout提供的两个概念可以帮助您解决这个问题。

如果您有click（或通过event绑定的特定事件），那么您可以在事件名称之后添加一个附加选项，后跟Bubble并将其设置为false。所以，你可以这样做：

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

其次，如果从true绑定（或click绑定）调用的处理程序返回event，则它将允许默认操作继续。

因此，一个选项是添加一个click绑定，该函数将true返回到您的内部链接，然后再添加一个clickBubble: false。所以，像：

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

这假设您有alwaysTrue函数返回true。

示例：http://jsfiddle.net/rniemeyer/UDHAp/

为简化起见，您甚至可以编写自定义绑定来为您执行此操作。这是一个包装点击装订的示例（如果您愿意，请选择一个短名称）：

ko.bindingHandlers.preventBubbleButAllowDefaultAction = {
    init: function(element, valueAccessor) {
        if (ko.utils.unwrapObservable(valueAccessor())) {
            ko.applyBindingsToNode(element, { click: function() { return true; }, clickBubble: false });
        }

    }        
};

示例：http://jsfiddle.net/rniemeyer/gyJsd/

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

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

示例：http://jsfiddle.net/rniemeyer/gyJsd/2/

嵌入在可点击订单项中的电子邮件链接

1 个答案: