Я также сталкивался с подобными ошибками при тестировании соединения JDBC Java MongoDB. Я думаю, что хорошо подвести итог моему окончательному решению коротким, чтобы в будущем кто-то мог напрямую изучить две команды и хорошо продолжать дальше.
Предположим, вы находитесь в каталоге, где ваш файл Java и внешний (файлы JAR).
Скомпилировать:
javac -cp mongo-java-driver-3.4.1.jar JavaMongoDBConnection.java
Run:
java -cp mongo-java-driver-3.4.1.jar: JavaMongoDBConnection
Имел ту же проблему, придумал это простое решение. Это даже работает рекурсивно:
$(document).mouseup(function(e)
{
var container = $("YOUR CONTAINER SELECTOR");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
dojo.query(document.body).connect('mouseup',function (e)
{
var obj = dojo.position(dojo.query('div#divselector')[0]);
if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
MyDive.Hide(id);
}
});
$('body').click(function(event) {
if (!$(event.target).is('p'))
{
$("#e2ma-menu").hide();
}
});
p
- имя элемента. Там, где можно передать идентификатор или имя класса или элемента.
Обновлено решение для:
var mouseOverActiveElement = false;
$('.active').live('mouseenter', function(){
mouseOverActiveElement = true;
}).live('mouseleave', function(){
mouseOverActiveElement = false;
});
$("html").click(function(){
if (!mouseOverActiveElement) {
console.log('clicked outside active element');
}
});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Возвращает false, если вы нажмете на .form_wrapper:
$('body').click(function() {
$('.form_wrapper').click(function(){
return false
});
$('.form_wrapper').hide();
});
//$('.form_wrapper').click(function(event){
// event.stopPropagation();
//});
Этот код обнаруживает любое событие клика на странице, а затем скрывает элемент #CONTAINER
тогда и только тогда, когда элемент щелкнул не как элемент #CONTAINER
, а один из его потомков.
$(document).on('click', function (e) {
if ($(e.target).closest("#CONTAINER").length === 0) {
$("#CONTAINER").hide();
}
});
И для сенсорных устройств, таких как IPAD и IPHONE, мы можем использовать следующий код
$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
Согласно документам , .blur()
работает больше, чем тег <input>
. Например:
$('.form_wrapper').blur(function(){
$(this).hide();
});
, если у вас есть проблемы с ios, mouseup не работает на яблочном устройстве.
делает mousedown / mouseup в jquery для ipad?
Я использую это:
$(document).bind('touchend', function(e) {
var container = $("YOURCONTAINER");
if (container.has(e.target).length === 0)
{
container.hide();
}
});
Возможно, вы захотите проверить цель события клика, который срабатывает для тела, вместо того, чтобы полагаться на stopPropagation.
Что-то вроде:
$("body").click
(
function(e)
{
if(e.target.className !== "form_wrapper")
{
$(".form_wrapper").hide();
}
}
);
Кроме того, элемент body может не включать все визуальное пространство, отображаемое в браузере. Если вы заметили, что ваши клики не регистрируются, вам может потребоваться добавить обработчик кликов для HTML-элемента.
Вот jsfiddle, который я нашел в другом потоке, также работает с ключом esc: http://jsfiddle.net/S5ftb/404
var button = $('#open')[0]
var el = $('#test')[0]
$(button).on('click', function(e) {
$(el).show()
e.stopPropagation()
})
$(document).on('click', function(e) {
if ($(e.target).closest(el).length === 0) {
$(el).hide()
}
})
$(document).on('keydown', function(e) {
if (e.keyCode === 27) {
$(el).hide()
}
})
var n = 0;
$("#container").mouseenter(function() {
n = 0;
}).mouseleave(function() {
n = 1;
});
$("html").click(function(){
if (n == 1) {
alert("clickoutside");
}
});
Что вы можете сделать, это привязать событие клика к документу, которое скроет раскрывающийся список, если щелкнуть что-либо вне раскрывающегося списка, но не скроет его, если щелкнуто что-то внутри выпадающего списка, поэтому ваше событие «показать» (или slidingown или любой другой, показывающий выпадающий список)
$('.form_wrapper').show(function(){
$(document).bind('click', function (e) {
var clicked = $(e.target);
if (!clicked.parents().hasClass("class-of-dropdown-container")) {
$('.form_wrapper').hide();
}
});
});
Затем, скрывая это, отвяжите событие click
$(document).unbind('click');
Вам лучше пойти с чем-то вроде этого:
var mouse_is_inside = false;
$(document).ready(function()
{
$('.form_content').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.form_wrapper').hide();
});
});
$(document).click(function(event) {
if ( !$(event.target).hasClass('form_wrapper')) {
$(".form_wrapper").hide();
}
});
Не было бы такого, как эта работа?
$("body *").not(".form_wrapper").click(function() {
});
или
$("body *:not(.form_wrapper)").click(function() {
});
Даже динамик:
$("html").click(function(){
$(".wrapper:visible").hide();
});
Вместо того, чтобы прослушивать каждый щелчок на DOM, чтобы скрыть один конкретный элемент, вы можете установить tabindex
на родительский <div>
и прослушать focusout
события.
Настройка tabindex
убедитесь, что событие blur
запущено на <div>
(обычно это не так).
Таким образом, ваш HTML будет выглядеть так:
<div class="form_wrapper" tabindex="0">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
И ваш JS:
$('.form_wrapper').on('focusout', function(event){
$('.form_wrapper').hide();
});
Живая демонстрация с функциональностью ESC
Работает как на рабочем столе, так и на мобильном устройстве
var notH = 1,
$pop = $('.form_wrapper').hover(function(){ notH^=1; });
$(document).on('mousedown keydown', function( e ){
if(notH||e.which==27) $pop.hide();
});
Если в некоторых случаях вы необходимо убедиться, что ваш элемент действительно заметен, когда вы нажимаете на документ: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();
$(document).ready(function() {
$('.modal-container').on('click', function(e) {
if(e.target == $(this)[0]) {
$(this).removeClass('active'); // or hide()
}
});
});
.modal-container {
display: none;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 999;
}
.modal-container.active {
display: flex;
}
.modal {
width: 50%;
height: auto;
margin: 20px;
padding: 20px;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-container active">
<div class="modal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p>
</div>
</div>
var exclude_div = $("#ExcludedDiv");;
$(document).click(function(e){
if( !exclude_div.is( e.target ) ) // if target div is not the one you want to exclude then add the class hidden
$(".myDiv1").addClass("hidden");
});
(Просто добавление к ответу prc322.)
В моем случае я использую этот код, чтобы скрыть навигационное меню, которое появляется, когда пользователь нажимает соответствующую вкладку. Я обнаружил, что было полезно добавить дополнительное условие, что целью клика за пределами контейнера является not ссылка.
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!$("a").is(e.target) // if the target of the click isn't a link ...
&& !container.is(e.target) // ... or the container ...
&& container.has(e.target).length === 0) // ... or a descendant of the container
{
container.hide();
}
});
Это связано с тем, что некоторые из ссылок на мой сайт добавляет новый контент на страницу. Если этот новый контент будет добавлен одновременно с исчезновением меню навигации, он может быть дезориентирован для пользователя.
Используя этот код, вы можете скрыть столько элементов, сколько хотите
var boxArray = ["first element's id","second element's id","nth element's id"];
window.addEventListener('mouseup', function(event){
for(var i=0; i < boxArray.length; i++){
var box = document.getElementById(boxArray[i]);
if(event.target != box && event.target.parentNode != box){
box.style.display = 'none';
}
}
})
Я хотел понравиться самому голосовавшему за предложение, но это не сработало для меня.
Этот метод почти такой же, но работал для меня. http://www.codesynthesis.co.uk/code-snippets/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it
Проверьте, что область щелчка не находится в целевом элементе или в его дочернем элементе
$(document).click(function (e) {
if ($(e.target).parents(".dropdown").length === 0) {
$(".dropdown").hide();
}
});
UPDATE:
] jQuery прекращение распространения является лучшим решением
$(".button").click(function(e){
$(".dropdown").show();
e.stopPropagation();
});
$(".dropdown").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$(".dropdown").hide();
});
Прикрепите элементы клика к элементам верхнего уровня вне оболочки формы, например:
$('#header, #content, #footer').click(function(){
$('.form_wrapper').hide();
});
Это также будет работать на сенсорных устройствах, просто убедитесь, что вы не включаете родителя .form_wrapper в списке селекторов.
Я сделал это так:
var close = true;
$(function () {
$('body').click (function(){
if(close){
div.hide();
}
close = true;
})
alleswasdenlayeronclicknichtschliessensoll.click( function () {
close = false;
});
});
Построен отважный ответ prc322.
function hideContainerOnMouseClickOut(selector, callback) {
var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
$(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
var container = $(selector);
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
$(document).off("mouseup.clickOFF touchend.clickOFF");
if (callback) callback.apply(this, args);
}
});
}
Это добавляет пару вещей ...
Надеюсь, это поможет кому-то!
Решение без jQuery для наиболее популярного ответа :
document.addEventListener('mouseup', function (e) {
var container = document.getElementById('your container ID');
if (!container.contains(e.target)) {
container.style.display = 'none';
}
}.bind(this));
MDN: https://developer.mozilla.org/en/docs/Web / API / узел / содержит