javascript - 如何防止使用 clickToggle 函数单击嵌套子元素后触发操作

Question

我的菜单结构如下:

  <li class="sub-menu ">
  <div class="menu-item"> Nasze wsparcie </div>
  <div class="menu-header "> Nasze wsparcie </div>
  <ul>
  <li> 
    <a class="menu-link" href="http://www.velux.pl/dla-klienta/serwis" 
    target="_blank">Obsługa posprzedażowa</a> 
  </li>
  <li> 
    <a class="menu-link" href="http://www.velux.pl/dla-klienta/zanim-kupisz" 
    target="_blank">Obsługa przedsprzedażowa</a> 
  </li>
  </ul>
  </li>

我希望单击子元素 (a) 不会触发应仅在单击父元素 (li) 后触发的操作。我已经阅读了有关此主题的其他线程，并尝试使用: event.stopPropagation();但我收到错误: e 未定义。当我尝试去做的时候。我不知道也许我做错了地方。请帮我。我的 JQuery 代码是:

            jQuery.fn.clickToggle = function(a,b) {
                function cb(){ [b,a][this._tog^=1].call(this); }
                return this.on("click", cb);
            }

            /**************************/



            $(".sub-menu").clickToggle(function() {   

                $(this).addClass('active');
                $('.menu-item').animate({'left':'-100%'}, 'slow', 'linear');
                $(this).find('.menu-header').animate({'right':'4%'}, 'slow', 'linear');

                /*$('.menu-item').addClass('is-hidden');*/
                $(this).find('.menu-header').attr('style', 'display: block !important');
                $('.service').animate({'left':'-100%'}, 'slow', 'linear');
                console.log("przed - 1");
                $(this).find('li').addClass('li-active');
                console.log("po - 1");
                /*$('.sub-menu ul').animate({'right':'0%'}, 'slow', 'linear');*/
                $(this).children('ul').css('display' , 'block');
                $(this).children('ul').animate({'right':'0%'}, 'slow', 'linear');
                $(this).find('a').css('display' , 'block');



            }, function() {

                $(this).removeClass('active');
                $('.menu-item').animate({'left':'4%'}, 'slow', 'linear');
                $(this).find('.menu-header').animate({'right':'-100%'}, 'slow', 'linear');
                $(this).find('.menu-header').attr('style', 'display: none !important');
                $('.service').animate({'left':'0%'}, 'slow', 'linear');
                console.log("przed - 2");
                $(this).find('li').removeClass('li-active');
                console.log("po - 2");
                /*$('.sub-menu ul').animate({'right':'-100%'}, 'slow', 'linear');*/
                $(this).children('ul').css('display' , 'none');
                $(this).children('ul').animate({'right':'-100%'}, 'slow', 'linear');
                $(this).find('a').css('display' , 'none');

                /*$('.menu-item').removeClass('is-hidden');*/

            });
        }

所以我准备了 fiddle 来显示问题:

https://jsfiddle.net/xot7va4z/

Answer 1

您可以测试 event target attribute以便决定是否切换类(class)。但是，您的函数中需要事件对象。这可以通过将事件参数传递给此行中的函数来完成( Function.prototype.call() ):

[b,a][this._tog^=1].call(this);

将其更改为:

[b,a][this._tog^=1].call(this, e);

现在，a 和 b 函数中都有该事件。

一个例子:

jQuery.fn.clickToggle = function(a,b) {
    function cb(e){ [b,a][this._tog^=1].call(this, e); }
    return this.on("click", cb);
}

/**************************/


$(".sub-menu").clickToggle(function(e) {
    if ($(e.target).is('a')) {
        return;
    }
    $(this).addClass('active');


}, function(e) {
    if ($(e.target).is('a')) {
        return;
    }
    $(this).removeClass('active');

});

.active{
    background-color:red;
}
a{
    text-decoration:none;
    color:#000;
}
.sub-menu{
    border:1px solid black;
    list-style-type:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul>
    <li class="sub-menu ">Parent
        <ul>
            <li>
                <a class="menu-link" href="http://www.velux.pl/dla-klienta/serwis"
                   target="_blank">Obsługa posprzedażowa</a>
            </li>
            <li>
                <a class="menu-link" href="http://www.velux.pl/dla-klienta/zanim-kupisz"
                   target="_blank">Child element</a>
            </li>
        </ul>
    </li>
</ul>