jQuery点击事件

Question

在下面的代码中，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 class="main">

        <a href="#" class="button" id="button1">
            Click Me!
        </a>
        <div class="tip" id="tip1">Hello again</div>

</div>

Answer 1

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

http://api.jquery.com/event.stopPropagation/

Answer 2

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

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

瑞克

Answer 3

1. 您应该停止事件的传播
2. 您应该检查是否单击了元素的任何子元素（如果单击该元素的子元素，则该元素将关闭）

3. 您可能应该对选择器更加谨慎（如果您打算仅在一个元素上使用它-因为您要使用ID（唯一的'＃button1'进行验证），则不应将getit函数绑定到所有元素使用类“ .button”）

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

Answer 4

感谢您的回答。 尝试了所有的人，每个人都工作。 但是我还通过添加另一个条件找到了另一种解决方案：

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