Как подвязать .click на весь экран, кроме нескольких блоков?
var main = function() {
$('.half-map-brovary').click(function() {
$('.map-2').animate({
left: '10px'
}, 400);
$('body').animate({
left: '0px'
}, 400);
});
$('.half-map-kyiv').click(function() {
$('.map-2').animate({
left: '-180px'
}, 600);
$('body').animate({
left: '0px'
}, 600);
});
};
$(document).ready(main);
var main = function() {
$('.half-map-kyiv').click(function() {
$('.map-1').animate({
right: '10px'
}, 400);
$('body').animate({
right: '0px'
}, 400);
});
$('.half-map-brovary').click(function() {
$('.map-1').animate({
right: '-180px'
}, 600);
$('body').animate({
right: '0px'
}, 600);
});
};
$(document).ready(main);Как подвязать .click на весь экран, кроме нескольких блоков? Есть ли событие второго клика в jquery?
Нужно чтобы: 1. При первом клике на карту она выезжала (сейчас работает) 2. При втором клике на нее же - прокладывался маршрут в google maps - переход в приложение - такое возможно? 3. А когда нажимаешь мимо карты - то она заезжает обратно.(привязал нажатие только на другую карту)
http://oliver.sliding.com.ua/ - мобильная версия
Почему этот скрипт не срабатывает?
<script type="text/javascript">
$(document).click(function(e) {
debugger;
var t = e.target;
if ($(t).hasClass('map-2')) {
if ($(t).hasClass('shown')) {
window.open("https://www.google.com.ua/maps/place/%D0%B2%D1%83%D0%BB%D0%B8%D1%86%D1%8F+%D0%93%D0%B0%D0%B3%D0%B0%D1%80%D1%96%D0%BD%D0%B0,+20%D0%91,+%D0%91%D1%80%D0%BE%D0%B2%D0%B0%D1%80%D0%B8,+%D0%9A%D0%B8%D1%97%D0%B2%D1%81%D1%8C%D0%BA%D0%B0+%D0%BE%D0%B1%D0%BB.,+%D0%A3%D0%BA%D1%80%D0%B0%D0%B8%D0%BD%D0%B0,+07400/@50.509616,30.7880527,17z/data=!3m1!4b1!4m5!3m4!1s0x40d4d964de41ddc1:0x576661f01912c3f8!8m2!3d50.5096126!4d30.7902414", "_blank");
} else {
$('.map-2').animate({
left: '10px'
}, 400);
$('body').animate({
left: '0px'
}, 400);
$(t).addClass('shown');
}
} else {
$('.map-2').animate({
left: '-180px'
}, 600);
$('body').animate({
left: '0px'
}, 600);
$(t).removeClass('shown');
}
});
</script>Здравствуйте, Владимир. Советую Вам подвязаться на событие onclick для элемента $(document), а в функции-обработчике смотреть на объект события (точнее, на его поле target). Именно поле target хранит элемент по которому совершили клик (по body или div class="map").
В принципе, можно было бы воспользоваться переменной счетчиком, чтобы определить второй клик по карте, но почему бы просто не добавить какой-нибудь атрибут (или класс, как в моем случае) на элемент, отвечающий за показ карты, во время первого клика?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div style="width: 100px; height: 100px; position: absolute; background: #666;" class="map">MAP</div>
</body>
</html>
<script type="text/javascript">
$(document).click(function (e) {
debugger;
var t = e.target;
if ($(t).hasClass('map')) {
if ($(t).hasClass('shown')) {
// Прокладываем маршрут, карта уже показана
} else {
// Покажем карту
$(t).addClass('shown');
}
} else {
// Карту скроем
$(t).removeClass('shown');
}
});
</script>
Код работает:
- При клике по карте - она выезжает чуть вправо;
- При повторном клике по карте - совершается переход по url;
- При клике вне области карты - она заезжает влево (за видимую область браузера).
Думаю, стоит подправить анимацию.
Кстати, если вы оставите ключевое слово "debugger" в js-скрипте, нажмете F12 (откроется панель разработчика) в браузере и обновите страницу - вы попадете в область отладчика и сможете пройтись построчно в своем js-коде [нажимайте F10 будучи в области отладчика] и выяснить в чем проблема.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div style="width: 100px; height: 100px; position: absolute; background: #666;" class="map-2"></div>
</body>
</html>
<script type="text/javascript">
$(document).click(function(e) {
debugger;
var t = e.target;
if ($(t).hasClass('map-2')) {
if ($(t).hasClass('shown')) {
window.open("https://www.google.com.ua/maps/place/%D0%B2%D1%83%D0%BB%D0%B8%D1%86%D1%8F+%D0%93%D0%B0%D0%B3%D0%B0%D1%80%D1%96%D0%BD%D0%B0,+20%D0%91,+%D0%91%D1%80%D0%BE%D0%B2%D0%B0%D1%80%D0%B8,+%D0%9A%D0%B8%D1%97%D0%B2%D1%81%D1%8C%D0%BA%D0%B0+%D0%BE%D0%B1%D0%BB.,+%D0%A3%D0%BA%D1%80%D0%B0%D0%B8%D0%BD%D0%B0,+07400/@50.509616,30.7880527,17z/data=!3m1!4b1!4m5!3m4!1s0x40d4d964de41ddc1:0x576661f01912c3f8!8m2!3d50.5096126!4d30.7902414", "_blank");
} else {
$('.map-2').animate({
left: '10px'
}, 400);
$('body').animate({
left: '0px'
}, 400);
$(t).addClass('shown');
}
} else {
$('.map-2').animate({
left: '-180px'
}, 600);
$('body').animate({
left: '0px'
}, 600);
$(t).removeClass('shown');
}
});
</script>
Можешь поставить счётчик.
var counter = 0;
$(".map").on("click", function() {
counter++;
if (counter == 1) {
console.log("Делай первое действие")
}
if (counter == 2) {
console.log("Делай второе действие")
}
})По поводу клика на всю область которая НЕ карта. Можешь допусим добавлять див обертку .wrapperBlock{width:100%; height:100vh; position:fixed; top:0;left:0; background-color: #f00; (временно) z-index: 100} а для .map {position:relative; z-index:101} Тогда по клику на эту область можно отменять действие первой карты, и вводить вторую (или что там тебе надо). Ну и потом удалишь этот див оббертку.
- Почему SERVER_ADDR имеет не тот IP 47699 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30546 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23726 visits
- Как через css изменить цвет png изображения? 10373 visits
- Blob video url download 9981 visits
- Php curl запрос через прокси с авторизацией 9240 visits
- Работа с captcha vk api 8117 visits
© "hostciti.net" 26.1.2025 | 08:26