7

クラス「要素」のdiv内にアンカーがあります。

<div class="element logout">
    <div class="subTop">
        <a href="home.jsp" onclick="return confirm('Do you want to logout?');">Log Out</a>
    </div>
</div>

次のコードを使用してログアウトを処理します。

jQuery(".element").click(function(e){
    var tmpHref=jQuery(this).not('.logout').find(".subTop>a").attr('href');
    if(tmpHref!=undefined&&tmpHref!=""&&tmpHref!=null)
    {
        window.location.href=tmpHref;
    }
    else
    {
        jQuery(this).find(".subTop>a").click();
    }
});

しかし、私の問題は、確認イベントが何度もトリガーされることです。均一な伝播のためだと思います。調査の結果、この投稿e.stopPropagation()から使用できることがわかりました。しかし、ここでこれをどのように使用できるかわかりません。

編集 「ログアウトしますか?」というメッセージ 確認ボックスではデータベースから動的に取得されるため、コードにハードコーディングすることはできません。

4

4 に答える 4

2

これを試して：

HTML:

<div class="element logout">
    <div class="subTop">
        <a href="home.jsp" class="testa" >Log Out</a>
    </div>
</div>

jQuery:

jQuery(".element").click(function(e){
    e.preventDefault();
    if( confirm('Do you want to logout?'))
    {
        //console.log(jQuery(this).parents('.element'));return;
        if(jQuery(this).hasClass('logout'))
        {        
            window.location.href='logout.jsp';
        }
        else
        {
            window.location.href='home.jsp';
        }
    }
});

テストフィドル: http://jsfiddle.net/e52QN/1/

于 2013-03-18T08:23:49.707 に答える
1

これは、私があなたが望むと思うもののいくつかの仮定に基づいています。コメントと質問から、外側のdivにログアウトクラスがない場合はユーザーを「home.jsp」に、ある場合は「logout.jsp」に送信する必要があることを理解しています。それが正しければ、htmlを次のように変更できます

<div class="element logout">
  <div class="subTop">
    <a href="home.jsp" data-confirmmsg="Do you want to logout?" >Log Out</a>
  </div>
</div>

そして JavaScript を

jQuery(".subTop>a").click(function(e){
  e.preventDefault();
});
jQuery(".element").click(function(e){
    var self = jQuery(this),
        isLogout = self.hasClass('logout')
        anchor = self.find(".subTop>a")
        href = isLogout ? "logout.jsp" : anchor.attr('href');

    if(!isLogout || (isLogout && confirm(anchor.data('confirmmsg'))))
    {
        window.location.href=href;
    }
});

Javascript の最初の部分は、単にa-tag をリンクとして無効にします。イベントを外側の要素に伝播すること以外には何も起こりません (クリックが実際にリンク上にあった場合は、`div-tag に処理させたくありません)。JavaScript の 2 番目の部分は、ログアウト クラスが存在するかどうかを確認することから始まり、それに応じて href を設定します。最後に、ユーザーが「logout.jsp」に送信される場合、確認ボックスが表示され、戻り値がテストされます。

于 2013-03-18T09:02:28.013 に答える
0

試す

onclick="return confirm('Do you want to logout?');window.event.cancelBubble = true;"

また

onclick="javascript:event.stopPropagation();return confirm('Do you want to logout?');"
于 2013-03-18T08:09:57.773 に答える
0

以下を使用できます。

$('.subTop a').on('click', function (e) {
  e.stopPropagation();
});

@ink.robot に同意しますが、この状況を回避するには、コードをより適切に構造化する必要があります。

于 2013-03-18T08:19:53.833 に答える