Adding New Element during `mousedown` event prevent triggering `click` event? - javascript

I am working with jquery events and I am adding a new element at the time of mousedown at the position of the mouse pointer and after adding the element the binded click event is not triggered.
Any suggestion is appreciable.
Thanks in advance.
Madhu
Code:
<div style="border:1px solid">Click</div>
<span></span>
<div class="vis" style="display:none">Hello</div>
<script>
var visualEle = $('div.vis');
visualEle.css({border:"1px solid"});
$('a').on("click", function (e) { e.preventDefault();});
$('div').on("mousedown", mDown);
$('div').on("mouseup",mUp);
function mDown(e) {
e.preventDefault();
visualEle.css({ left: 100, top: 0, display: "block" });
}
function mUp(e) {
e.preventDefault();
$('span').append('mouse up triggerd<br/>');
return false;
}
$('p').on("click",dClick);
function dClick(e) {
$('span').append('double click triggerd<br/>');
}
</script>
In the above code the click event is not triggered after the mousedown is completed.

according to this document
The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released
in your case mouse point is over when mousedown happen but after that visualDiv moves under and mouse is released on this element.
possible solution I can think of thanks to #ArunPJohny is use $(this).trigger("click");
$('p').on("mousedown", function (e) {
_x = e.pageX;
_y = e.pageY;
visualDiv.css({
left: _x,
top: _y
});
$(this).trigger("click");
});
$('p').on("click", function (e) {
console.log(e.target)
});
Demo: http://jsfiddle.net/c5CRd/

Related

Mouse event "mousemove" gets fired when pressing and releasing mouse buttons

As title says, I noticed that on my canvas mousemove is fired when mouse buttons are pressed/released even though I'm not actually moving the mouse. The problem is that, in the case of releasing the button, it gets fired AFTER mouseup!
Is that normal behaviour?
How to fix/workaround? I really need my mouseup to fire last, or mousemove not to fire at all when releasing buttons; setTimeout is not a legit solution.
Sample: https://jsfiddle.net/h40mm4mj/1/ As simple as that: if you open console and click in the canvas, you'll notice mousemove is logged after mouseup
canvas.addEventListener("mousemove", function (e) {
console.log("mousemove");
}, false);
canvas.addEventListener("mouseup", function (e) {
console.log("mouseup");
}, false);
EDIT: Just tested, it only happens on Chromium, Windows.
I´ve was having the same issue. Solve comparing the previus mouse position with new mouse position :
function onMouseDown (e) {
mouseDown = { x: e.clientX, y: e.clientY };
console.log("click");
}
function onMouseMove (e) {
//To check that did mouse really move or not
if ( e.clientX !== mouseDown.x || e.clientY !== mouseDown.y) {
console.log("move");
}
}
Taken from here : What to do if "mousemove" and "click" events fire simultaneously?

Map Informations with fadeIn and fadeOut

I have a map with some pinpoints that, if you click on them show some information. The plan was, that I can click a Icon and it shows a div, if I now click the same icon the div will disapear.
As long as i got show() it works but if I put in fadeIn() it reapears on the second click.
Here my script so far
<script type="text/javascript">
jQuery(document).ready(function() {
$(".icon-location").on('click', function(event){
$('[id^="ort-box-"]').fadeOut('slow');
});
var mouseX;
var mouseY;
$(document).ready(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".icon-location").on('click', function(event){
var currentId = $(this).attr('id');
$("#ort-box-"+currentId).show().css({position:"absolute", top:event.pageY, left: event.pageX, "z-index":"998"});
});
});
</script>
EDIT:
Thanks to Max I got something startet but there is some logic mistake I must have made.
$(".icon-location").on('click', function(event){
$('[id^="ort-box-"]').fadeOut('slow');
if(!$(this).hasClass('ortActive')){
var currentId = $(this).attr('id');
$("#ort-box-"+currentId).fadeIn('slow').css({position:"absolute", top:event.pageY, left: event.pageX, "z-index":"998"});
$(this).addClass('ortActive');
}else {
$(this).removeClass('ortActive');
}
});
You're attaching 2 eventhandlers on the same DOM element.
So if you click on it, both handlers will fire the event and both functions will be called.
Maybe use something like
$(this).addClass('active');
if you trigger the event for the first time, check when you press again with
if($(this).hasClass('active')){ ...
$(this).removeClass('active');
}
This way you can be sure, that you can trigger only the wanted parts of the event handlers.

How to get mouseup event after native drag event?

The implementation of the WHATWG drag and drop supports dragstart, drag and dragend events.
The dragend event fires when the draggable object returns to the original position, e.g. try dragging the red box as far as you can and release it. The dragend (and "END!" console.log message) will not fire until the draggable element returns to the original position (this is most visible in the Safari browser).
var handle = document.querySelector('#handle');
handle.addEventListener('dragend', function () {
console.log('END!');
});
#handle {
background: #f00; width: 100px; height: 100px;
}
<div id="handle" draggable="true"></div>
How do I capture the mouseup or whatever else event that would indicate the release of the drag handle without a delay?
I have tried variations of:
var handle = document.querySelector('#handle');
handle.addEventListener('dragend', function () {
console.log('END!');
});
handle.addEventListener('mouseup', function () {
console.log('Mouseup');
});
#handle {
background: #f00; width: 100px; height: 100px;
}
<div id="handle" draggable="true"></div>
Though, "mouseup" does not fire after dragstart.
The closest I got to finding an event that would fire instantly after the release of the handle is mousemove:
var handle = document.querySelector('#handle');
handle.addEventListener('dragend', function () {
console.log('END!');
});
window.addEventListener('mousemove', function () {
console.log('I will not fire during the drag event. I will fire after handle has been released and mouse is moved.');
});
#handle {
background: #f00; width: 100px; height: 100px;
}
<div id="handle" draggable="true"></div>
The problem is that this approach requires user to move the mouse.
The workaround is to enable drop on the document.body:
// #see https://developer.mozilla.org/en-US/docs/Web/Events/dragover
document.body.addEventListener('dragover', function (e) {
// Prevent default to allow drop.
e.preventDefault();
});
document.body.addEventListener('drop', function (e) {
// Prevent open as a link for some elements.
e.preventDefault();
});
Making document.body to listen for the drop event results in dragend thinking that you will move the element to the new position upon releasing the handle. Therefore, there is no delay between handle release and dragend.

JavaScript mousemove event inside an iframe

I'm having some strange behaviour from this code:
$(document).mousemove( function(e) {
console.log( e.clientX, e.clientY );
});
It runs inside an iframe and only fires if I hold down the left mouse button and move the mouse. Moving the mouse without holding down the left button does nothing..
Any ideas whats going on here?
an iframe is a separate window, ie if the mouse leaves the iframe any action that void. you have to start it again
$(document).bind("mousedown", function (e) {
var mouseMove = function (e) {
console.log( e.clientX, e.clientY );
};
//[[First click==>*/
mouseMove(e);
$(document).bind("mousemove", mouseMove)
.bind("mouseup",function (e) {
$(document).unbind('mousemove mouseup');
});
});

How attach html-element to mouse using jQuery?

How do I attach html-element to mouse cursor using jQuery. This should be something like 'draggable', but I want that element clung to the cursor after mouse double-click and to follow the cursor until the left mouse button is pressed.
You'll want to use .mousemove() and .offset().
$("#clickedElement").dblclick(function () {
var $someElement = $("#elementToCling");
$(document).mousemove(function (e) {
$someElement.offset({ top: e.pageY, left: e.pageX });
}).click(function () {
$(this).unbind("mousemove");
});
});
Working demo: http://jsfiddle.net/EbbxA/

Categories

Resources