событие jQuery click

Question

В следующем коде событие click добавляется в тело явным образом, так что даже если щелкнуть за пределами кнопки, скажем, на теле, div с идентификатором tip1 должен закрыться с эффектом замиранияПроблема в том, что 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

спасибо за ваши ответы. Пробовал со всеми и каждый работал. Но я также нашел другое решение, просто добавив еще одно условие:

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

Answer 2

Возможно, вы можете связать событие click с самим div и предотвратить всплывающее событие click?

Answer 3

1. Вы должны остановить распространение события
2. Вы должны проверить, щелкнули ли какие-либо дочерние элементы элемента (если щелкнуть дочерний элемент этого элемента, элемент закроется)

3. вам, вероятно, следует быть более осторожным с вашими селекторами (если вы собираетесь использовать это только для одного элемента - поскольку вы проверяете с помощью идентификатора ('# 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

Установите событие щелчка на вашем div на 'stopPropagation'

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