Использовать stopPropagation в событии click

у меня есть якорь внутри 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() С этой пост. Но я не могу понять, как это можно использовать здесь.

редактировать Сообщение " вы хотите выйти из системы? в поле подтверждение динамически из базы данных, поэтому я не могу жесткий код в код.

7
events jquery stoppropagation

4 ответов

это основано на нескольких предположениях о том, что я думаю, что вы хотите. Из комментариев и вопроса я понимаю, что пользователь должен быть отправлен домой.jsp', если у внешнего сопля div doe есть класс выхода из системы или выход из системы.jsp ' если это так. Если это правильно, вы можете cahnge 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-тегу обрабатывать его). Вторая часть JavaScript начинается с проверки наличия или отсутствия класса выхода и устанавливает href соответственно. наконец, если пользователь отправляется в ' logout.jsp ' будет показано поле подтверждения и проверено возвращаемое значение.

1

попробуйте это:

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/

2

попробовать

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

или

onclick="javascript:event.stopPropagation();return confirm('Do you want to logout?');"
0

вы можете использовать:

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

Я согласен с @ink.робот, хотя, ваш код должен быть структурирован лучше, чтобы избежать этой ситуации.

0