щелчок jQuery от события элемента
Вы попробовали
$.extend($.expr[':'], {
focused: function(elem) { return elem.hasFocus; }
});
alert($('input :focused').length);
8 ответов
Другой, возможно, более простой вариант - добавить прозрачный div между плавающим DIV и остальной частью страницы.
Простое событие щелчка на прозрачном DIV может справиться с сокрытием и избежать проблем, которые вы сталкиваются с событием щелчка.
You're going to need to monitor the mouseDown event for the whole page, but you'll have to take note when the user is clicking inside your floating div.
I would suggest adding a hover event to your floated div so when the user is hovering over it, mouseDown is disregarded, but when it is not being hovered over mouseDown would close it
Вот полноценный подход, управляемый событиями
- Пользовательские события обрабатывают "вызов" и "отклонение" слоя, чтобы не наступать на пятки другим событиям, основанным на щелчках
- document.body прослушивает событие отклонения только тогда, когда рассматриваемый слой действительно виден
Код Zee:
<!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>
Я знаю много кода, но здесь просто для того, чтобы показать другой подход.
If you want to clear the div when you click somewhere else in the page, you can do something like:
$('body').click(function(event) {
if (!$(event.target).closest('#myDiv').length) {
$('#myDiv').hide();
};
});
Вы можете попробовать это. http://benalman.com/projects/jquery-clickoutside-plugin/
Если вы используете JQuery, вы можете использовать такой селектор:
$("*:not(#myDiv)").live("click", function(){
$("#myDiv").hide();
});
Мне хорошо подходит использование обработчика событий в документе:
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;
}