Question

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function() {
//Add Header Listeners
//Signup Listener
jQuery(".top-nav-login-links .exchange-signup").click(headerObject.toggleLightBoxSignup.bind(headerObject));

//Login Listener
jQuery(".top-nav-login-links .exchange-login").click(headerObject.toggleLightBoxLogin.bind(headerObject));

//Lightbox Close Listeners
jQuery("i.close-lightbox, div.light-box-parent").click(function(e) {
    e.stopPropagation();
    if(jQuery(this).attr("data-rel") == "signUpVisible") {
        headerObject.toggleLightBoxSignup();
    } else if(jQuery(this).attr("data-rel") == "loginVisible") {
        headerObject.toggleLightBoxLogin();
    }
});
});

var headerObject = {
isLoginLightBoxVisible : false,
isSignupLightBoxVisible : false,
isCookiesBannerVisible : true,
showServicesDropdown : false,
isMobileMenuVisible : false,
layoutElement : document.querySelector('#layout'),
toggleLightBoxLogin : function() {
    jQuery("#loginVisible").toggle();
},
toggleLightBoxSignup : function() {
    jQuery("#signUpVisible").toggle();
},
toggleMobileMenu : function() {
    if (!this.isMobileMenuVisible) {
        this.layoutElement.classList.add("active");
    } else {
        this.layoutElement.classList.remove("active");
    }

    this.isMobileMenuVisible = !this.isMobileMenuVisible;
},
closeCookiesBanner : function() {
    this.isCookiesBannerVisible = false;
    //localStorage.setItem('this.isCookiesBannerVisible', 'false');
},
onMenuItemClick : function() {
    if (('ontouchstart' in window) || window["DocumentTouch"] && document instanceof DocumentTouch) {
        event.preventDefault();
        event.stopPropagation();
    }
}
};
  </script>

<div class="top-nav-login-links">
            <ul>
                <li class="pure-hidden-phone"><a class="exchange-signup" href="#">Sign up</a></li>
                <li class="pure-hidden-phone"><a class="login exchange-login" href="#">Log in</a></li>
                <li class="pure-hidden-tablet pure-hidden-desktop" data-ng-click="viewModel.toggleLightBoxLogin()"><i class="fa fa-user login-cta login"></i></li>
            </ul>
        </div>
    </div>
</section>
<div id="loginVisible" class="light-box-parent login-lightbox" data-rel="loginVisible">
     <div class="light-box-options">
        <div class="light-box-container" >
            <figure class="login-figure">
                <a id="link-expert-login" href="http://experts.blurgroup.com/">
                    <img id="img-login-expert" src="<?php echo get_template_directory_uri(); ?>/images/shared/login_expert_logo.png" alt="Expert">
                    <figcaption class="login-figcaption">Expert</figcaption>
                </a>
            </figure>

            <figure class="login-figure customer-login">
                <a id="link-customer-login" href="/customer/">
                    <img id="img-login-customer" src="<?php echo get_template_directory_uri(); ?>/images/shared/login_customer_logo.png" alt="Customer">
                    <figcaption class="login-figcaption">Customer</figcaption>
                </a>
            </figure>
        </div>
         <div class="light-box-title">Login</div>
         <i class="fa fa-times-circle"></i>
    </div>
</div>

<div id="signUpVisible" class="light-box-parent expert-sign-up" data-rel="signUpVisible">
    <div class="light-box-options">
        <div class="light-box-container">
            test
        </div>
        <div class="light-box-title">New to blur Group? Join the crowd</div>
        <i class="fa fa-times-circle close-lightbox" data-rel="signUpVisible"></i>
    </div>
</div>

＆＃13;

我目前正在实施一些灯箱，这些灯箱在点击某些锚点时打开。然后我有了功能，而当灯箱本身或其中的一个图标（点击了类＆＃39;关闭）时，它应该根据存储在＆data; data-rel＆中的值关闭相应的灯箱。＃39; HTML5数据属性。

我遇到的问题是click事件正在传播到灯箱内的任何子元素，即使我已经针对特定元素本身并使用了event.stopPropagation（）。

我无法弄清楚为什么会这样。有人可以看到我的代码有问题吗？感谢

Answer 1

尝试使用stopImmediatePropagation函数代替stopPropagation

使用stopPropagation时，在父DIV上发生jQuery单击事件

1 个答案: