Используйте stopPropagation в событии клика

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

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


events jquery stoppropagation
person arjuncc    schedule 18.03.2013    source источник
comment
Я думаю, что вы хотите перенаправить свою страницу в соответствии с div class, logout или not. Если logout class, то logout.jsp, а если div не имеет logout class, то home.jsp. Верно?   -  person Rohan Kumar    schedule 18.03.2013
comment
У вас есть бесконечный цикл - click() внутри предложения else. Сначала пересмотрите свою логику - e.stopPropagation() или отмена всплывающего окна события - это скорее плохой патч - ваш код должен быть достаточно чистым сам по себе, чтобы выйти изящно без какого-либо взлома. Я уверен, что этот код можно очень аккуратно переписать. Можете ли вы уточнить, чего вы пытаетесь достичь?   -  person    schedule 18.03.2013

Ответы (4)


arrow_upward
1
arrow_downward

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

person Rune FS    schedule 18.03.2013
comment
Здравствуйте, сэр, я уважаю ваше мнение, но у меня есть динамический контент (из базы данных) в окне подтверждения. поэтому я не могу жестко закодировать «Вы хотите выйти из системы?» (Я добавил это как редактирование в сообщении) - person arjuncc; 18.03.2013
comment
@arjuncc тебе не придется. Просто отправьте сообщение как данные в тег a. Посмотреть обновление - person Rune FS; 18.03.2013

arrow_upward
2
arrow_downward

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

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/

person Rohan Kumar    schedule 18.03.2013
comment
@arjuncc Попробуйте сделать это прямо сейчас. - person Rohan Kumar; 18.03.2013
comment
ваш код хорош +1 для этого, но он не решит мою проблему. У меня есть динамический контент (из базы данных) в окне подтверждения. поэтому я не могу жестко закодировать «Вы хотите выйти из системы?» - person arjuncc; 18.03.2013
comment
Вы можете добавить data attribute для этого как <div class="element logout" data="your database data"> и в jquery использовать его как if( confirm($(this).attr('data')) - person Rohan Kumar; 18.03.2013

arrow_upward
0
arrow_downward

Пытаться

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

ИЛИ

onclick="javascript:event.stopPropagation();return confirm('Do you want to logout?');"
person Dipesh Parmar    schedule 18.03.2013

arrow_upward
0
arrow_downward

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

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

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

person Vimal Stan    schedule 18.03.2013