jQuery click off событие элемента - PullRequest
Новая
       26

jQuery click off событие элемента

44 голосов
/ 15 сентября 2009

У меня есть плавающий div, который отображается, и я хочу, чтобы он был скрыт, когда пользователь щелкает div. Это было бы похоже на обратный вызов функции .hover () при наведении курсора на элемент. Только я хочу сделать это за клик.

Я попытался просто установить событие щелчка для тела, которое скрыло бы div, но это дало неожиданные результаты.

У кого-нибудь есть идеи, как мне легко это сделать?

Ответы [ 15 ]

0 голосов
/ 08 января 2011

Я нашел решение на форуме ... но я не могу найти его обратно, чтобы отдать должное оригинальному автору. Вот версия (модифицированная, которая живет в моем коде). 

 $(document).bind('mousedown.yourstuff', function(e) {
            var clicked=$(e.target); // get the element clicked                 
            if( clicked.is('#yourstuff')
                 || clicked.parents().is('#yourstuff')) {
                // click safe!
            } else {
                // outside click
                closeIt();
            }
        });

 function closeIt() {
        $(document).unbind('mousedown.emailSignin');
        //...
}

У меня также есть привязки клавиш ESC и html-привязка 'close', не показанная выше.

0 голосов
/ 09 июня 2010

Использование обработчика событий в документе хорошо работает для меня: 

function popUp( element )
{
    element.onmousedown = function (event) { event.stopPropagation(); };
    document.onmousedown = function () { popDown( element ); };

    document.body.appendChild( element );
}

function popDown( element )
{
    document.body.removeChild( element );

    document.onmousedown = null;
}
0 голосов
/ 02 марта 2010

Вы можете попробовать это. http://benalman.com/projects/jquery-clickoutside-plugin/

0 голосов
/ 15 сентября 2009

Вот полноценный, ориентированный на события подход

  • Пользовательские события обрабатывают "вызов" и "отклонение" слоя, чтобы не наступать на пальцы других основанных на клике событий
  • document.body прослушивает событие dismiss, только когда рассматриваемый слой действительно виден

Зи код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(function()
{
  var $layer = $('#layer');
  var $body  = $('html');

  $layer
    .bind( 'summon', function( e )
    {
      $layer.show();
      $body.bind( 'click', dismissLayer );
    } )
    .bind( 'dismiss', function( e )
    {
      $layer.hide();
      $body.unbind( 'click', dismissLayer );
    } )
    .click( function( e )
    {
      e.stopPropagation();
    })
    .trigger( 'dismiss' )
  ;

  function dismissLayer( e )
  {
    $layer.trigger( 'dismiss' );
  }

  // This is optional - this just triggers the div to 'visible'
  $('#control').click( function( e )
  {
    var $layer = $('#layer:hidden');
    if ( $layer.length )
    {
      $layer.trigger( 'summon' );
      e.stopPropagation();
    }
  } );
});

</script>

<style type="text/css">
#layer {
  position: absolute;
  left: 100px;
  top: 20px;
  background-color: red;
  padding: 10px;
  color: white;
}
#control {
  cursor: pointer;
}
</style>

</head>
<body>

<div id="layer">test</div>
<span id="control">Show div</span>

</body>
</html>

Я знаю много кода, но здесь просто для того, чтобы показать другой подход.

0 голосов
/ 15 сентября 2009

Вам нужно будет отслеживать событие mouseDown для всей страницы, но вы должны будете принять к сведению, когда пользователь щелкает внутри вашего плавающего div.

Я бы предложил добавить событие hover к вашему плавающему элементу div, чтобы при наведении на него курсора пользователь mouseDown не учитывался, но если его не навести на mouseDown, это закрывало бы

Страница:
...