0

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

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

1 回答 1

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/

于 2012-11-08T18:16:06.487 回答