Javascript jQuery单击事件

在下面的代码中，click事件被显式地添加到主体中，这样即使在主体上的按钮外单击，ID为tip1的div也应该以淡入淡出的效果关闭。 这里的问题是，即使单击div本身，div也会关闭。 这方面的任何想法都会有帮助

$(document).ready(function(){
            $('.button').getit({speed: 150, delay: 300});
    });

    $.fn.getit = function(options){


    var defaults = {
        speed: 200,
        delay: 300
    };

    var options = $.extend(defaults, options);
    $(this).each(function(){

        var $this = $(this);
        var tip = $('.tip');
        this.title = "";
        var offset = $(this).offset();
        var tLeft = offset.left;
        var tTop = offset.top;
        var tWidth = $this.width();
        var tHeight = $this.height();


    $this.click(

            function() {

            if($('.tip').hasClass('.active101')) {
                $('.tip').fadeOut("slow");
                $('.tip').removeClass('.active101').addClass('.inactive101');

            }
            else {
                setTip(tTop, tLeft);
                $('body').bind('click',function(e) {
                        var parentElement = "button1";
                        var parentElement2 = "tip1"
                        if( e.target.id != parentElement) {
                            $('.tip').fadeOut("slow");
                            $('.tip').removeClass('.active101').addClass('.inactive101');
                        }

                }); 
                $('.tip').removeClass('.inactive101').addClass('.active101');
                setTimer();
            }
            }, 
            function() {
                if($('.tip').hasClass('.inactive101')) {
                stopTimer();
                tip.hide();
                }
            }
    );  

        setTimer = function() {

            $this.showTipTimer = setInterval("showTip()", defaults.delay);

        }

        stopTimer = function() {
            clearInterval($this.showTipTimer);
        }


        setTip = function(top, left){
            var topOffset = tip.height();
            var xTip = (left-440)+"px";
            var yTip = (top-topOffset+100)+"px";
            tip.css({'top' : yTip, 'left' : xTip});
        }

    showTip = function(){
            stopTimer();

            tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
        }   

    });
}; 

你好

---

将div上的单击事件设置为“stopPropagation”

---

也许您可以将一个click事件绑定到div本身，并防止click事件冒泡

$("#div").click(function(e) {
  e.stopPropagation();
});

瑞克

您应该停止事件的传播

您应该检查是否单击了该元素的任何子元素（如果单击该元素的子元素，则该元素将关闭）

您可能应该更小心地使用选择器（如果您只打算在一个元素上使用它-因为您正在使用id（“#button1”是唯一的）进行验证，那么不应该将getit函数绑定到类为“.button”的所有元素）

---

谢谢你的回答。他们都试过了，每个人都成功了。但我也通过添加另一个条件找到了另一个解决方案：

if (e.target.id != parentElement && e.target.id != parentElement2) {
    $('.tip').fadeOut("slow");
    $('.tip').removeClass('.active101').addClass('.inactive101');
}

---

您可以在div上使用jQuery unbind函数（）。只需将click事件细节移动到一个命名函数中，然后在div上调用unbind。我想他希望单击主体来关闭div，但点击div使其保持打开状态-这与此相反。@idbentley-从我所读到的内容来看，他希望只要点击div，div就会保持打开状态-“这里的问题是，即使我们点击div本身，div也会关闭。”。

if( e.target.id != parentElement 
   && $(e.target).parents('#'+parentElement).length == 0) {
    $('.tip').fadeOut("slow");
    $('.tip').removeClass('.active101').addClass('.inactive101');
    e.stopPropagation();
}

if (e.target.id != parentElement && e.target.id != parentElement2) {
    $('.tip').fadeOut("slow");
    $('.tip').removeClass('.active101').addClass('.inactive101');
}