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 には、この問題に役立つ 2 つの概念があります。

click(またはバインドによる特定のイベント) がある場合eventは、イベント名の後に続くオプションを追加して、Bubbleそれを false に設定できます。したがって、次のことができます。

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

第 2 に、バインディング (またはバインディング)trueから呼び出されたハンドラーから戻ると、既定のアクションを続行できるようになります。clickevent

したがって、1 つのオプションは、内部リンクにclick戻る関数を使用してバインディングを追加し、 . したがって、次のようなものです：trueclickBubble: 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 に答える