Hi is there a way to prevent jquery from detecting a click event when you drag and release outside of an input field?
The thing is I have a modal window that closes when you click outside of the window (the backdrop).
When you have an input field in the modal window and you select the text inside the input and drag your mouse all the way out of the modal window area, then release the click, the modal will close since it detects a click event on that element when it actually wasn't a click event but a "release" event.
Here is an example https://jsfiddle.net/imurphy/tafwzero/1/
Click event code:
$('.how').on('click',function(e){
e.preventDefault();
if(!$(e.target).is('.how')){
return;
}
alert('Modal Closed');
});
Thank you
Check below code.You need use mousedown and mouseup handle the drag and drop
var isDragging = false;
$(".how")
.mousedown(function() {
$(window).mousemove(function() {
isDragging = true;
$(window).unbind("mousemove");
});
})
.mouseup(function() {
var wasDragging = isDragging;
isDragging = false;
$(window).unbind("mousemove");
if (!wasDragging) {
$(this).selection();
}
});
$('.how').on('click',function(e){
e.preventDefault();
if(!$(e.target).is('.how')){
return;
}
alert('Modal Closed');
});
Related
I am trying to display address on map on popup's as shown below in the image.
Image of popup:
When I hover mouse on pin icon the popup appears but when I move to popup it disappear.
Javascript I am using:
<script>
jQuery(function($) {
var pop = $('.map-popup');
pop.click(function(e) {
e.stopPropagation();
});
$('a.marker').hover(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).next('.map-popup').toggleClass('open');
$(this).parent().siblings().children('.map-popup').removeClass('open');
});
$(document).click(function() {
pop.removeClass('open');
});
pop.each(function() {
var w = $(window).outerWidth(),
edge = Math.round( ($(this).offset().left) + ($(this).outerWidth()) );
if( w < edge ) {
$(this).addClass('edge');
}
});
});
</script>
Code Pen link: codepen
Instead of
$('a.marker').hover(function(e) {
use
$('a.marker').mouseenter(function(e) {
hover handles both mouseenter and mouseleave events. If you don't pass a handler for mouseleave, it will execute the function for mouseenter, so in your case,
$(this).next('.map-popup').toggleClass('open');
is executed again for mouseleave so the popup gets hidden.
Read more here.
When I'm select text and start to drag selections, mouse event like a wheel or mousemove doesn't fire. How I can catch an event while dragging?
I create a test example to check this issue, you can see it here:
https://jsfiddle.net/prevolley/3q7xwa8p/4/
<p>dasdasdasdas</p>
document.addEventListener('wheel', (event) => {
console.log('wheel', event.deltaY);
});
document.addEventListener('mousemove', (event) => {
console.log('mousemove', event.pageX);
});
I want to catch a mouse event while I drag selected text.
An image where I show the problem:
you can use event drag:
document.addEventListener('drag', (event) => {
console.log('drag', event.pageX);
});
Text
I have a series of divs that reveal on link click. When revealed i'm trying to make them close on background click while maintaining their ability to have the different divs replace each other when different links are clicked.
JS fiddle here: http://jsfiddle.net/t593pyg9/3/
$(document).ready(function () {
$('.toggle').hide();
$('a.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle')
$('.toggle').not(elem).hide();
elem.toggle();
});
});
Listen to clicks on the entire document, to prevent this from closing the "popup" after clicking it's link due to event propagation add a return false; to the show click listener.
$('.toggle').hide();
$('a.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle')
$('.toggle').not(elem).hide();
elem.toggle();
return false;
});
$(document).on('click',function(e){
$('.toggle').hide();
});
Fiddle
Update
If you want to prevent the popup from hiding on clicking on it add this:
$('.toggle').on('click', function (e) {
return false;
});
New Fiddle
How to trigger an action when focusing an input but the focus event not come from click?
$('#input').focus(function(){
if(not come from click)
{
alert('Holla!');
}
});
To tell between "focus" events that come from keyboard and those that come from mouse, you can track the mouse events.
First, to understand the sequence of events that happen when you click an input, or Tab into it, look at the following jsfiddle: http://jsfiddle.net/orlenko/fyFkk/
In it, we'll log mousedown, mouseup, click, focus, and blur events.\
<input type="text" id="zero"/>
<input type="text" id="one"/>
JavaScript:
$(function() {
var one = $('#one');
one.mousedown(function() {
console.log('mousedown');
});
one.mouseup(function() {
console.log('mouseup');
});
one.click(function() {
console.log('click');
});
one.focus(function() {
console.log('focus');
});
one.blur(function() {
console.log('blur');
});
});
If we simply click on the input, and then on another control, we'll get the following:
mousedown
focus
mouseup
click
blur
But if we tab into and out of the input, we'll see in the console:
focus
blur
So, if we keep track of mousedown and blur events, we can tell between a keyboard-based focus and a mouse-based one. For example:
$(function() {
var one = $('#one');
one.mousedown(function() {
console.log('mousedown');
$(this).data('mousedown', true);
});
one.mouseup(function() {
console.log('mouseup');
});
one.click(function() {
console.log('click');
});
one.focus(function() {
if ($(this).data('mousedown')) {
console.log('You clicked it!');
} else {
console.log('You tabbed it!');
}
});
one.blur(function() {
console.log('blur');
$(this).data('mousedown', false);
});
});
A fiddle with this example: http://jsfiddle.net/orlenko/cwRAw/
Use keyup
$('#input').keyup(function(){
alert('Called only when the focus is on element through keypress');
});
function ren(){
alert('Holla!');
}
$('input').focus(ren);
$('input').mousedown(function(){
$('input').off('focus',ren);
});
$('input').mouseup(function(){
$('input').on('focus',ren);
});
Don't check in focus function instead remove the focus function when making a click
Demonstration
I'm trying to setup an event where it fires after my element is opened. So I have a tooltip and I have a click event which shows the tooltip. Then when that happens I setup a document click event that gets fired so if the user clicks anywhere on the stage it removes all tooltips. But what's happening is it gets called before the tooltip even gets a chance to show. So it's firing the document event over and over again.
$('.container img').popover({placement:'top', trigger:'manual', animation:true})
.click(function(evt){
evt.preventDefault();
el = $(this);
if(el.hasClass('active')){
el.popover('hide');
}else{
clearDocumentEvent();
el.popover('show');
$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(){
hideAllTooltips();
});
}
el.toggleClass('active');
})
var hideAllTooltips = function(){
$('.container img').popover('hide');
$('.container img').removeClass('active');
}
var clearDocumentEvent = function(){
$(document).off('click.tooltip touchstart.tooltip');
};
The problem stems from event bubbling. You can verify this by doing the following test:
$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(){
//hideAllTooltips();
console.log($(this)); // will return .container, body, html
});
Try using event.stopPropogation():
$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(e){
e.stopPropagation();
hideAllTooltips();
});
DEMO:
http://jsfiddle.net/dirtyd77/uPHk6/8/
Side note:
I recommend removing .tooltip from the on function like
$(document).on('click touchstart', ':not(.container img)', function(){
e.stopPropagation();
hideAllTooltips();
});