How can I trigger mouse up at the specific position - javascript

I tried to trigger mousedown event at the specific position using jQuery.
What I need is to implement mousedown event at the specified coordinates and mouseup event also.
So I am going to implement mouse drag event automatically when I click any button.
Is it possible on canvas?
This is my attempt
$('#clickMe').click(function() {
$("#map-canvas").trigger("mousedown", { which: 1, pageX: 1057, pageY: 770 });
$("#map-canvas").trigger("mouseup", { which: 1, pageX: 370, pageY: 541 });
$("#map-canvas").off("mousedown").on("mousedown", function (e) {
console.log('#### DEBUG CLICK: ', e);
});
$("#map-canvas").off("mouseup").on("mouseup", function (e) {
console.log('#### DEBUG CLICK EVENT: ', e); // fixme
});
});
Trigger`s action is okay.
But I can not mousedown event at the expectation position.
How can I implement it?
Thanks.

Related

How can i unbind for specific jquery scroll event?

I am having scroll event.
this.todayScrollerRef = $(window).scroll(() => {
console.log('some stuff');
});
On button click i want to unbind from the event
So when i try
$(window).unbind('scroll');
it works - and i don't get some stuff in console when i am scrolling after the button click.
But because i have another window.scroll event i don't want to use $(window).unbind('scroll');
because it unbinds all of the scroll events.
So i want to unbind specific one - and when i try
$(window).unbind('scroll', this.todayScrollerRef);
for my created todayScrollerRef reference - it does not work.
Scroll event is not destroyed
I also tried with
$(window).on('scroll', this.todayScroller.bind(this));
todayScroller() {
console.log('some stuff');
}
// on btn click
$(window).off('scroll', this.todayScroller.bind(this));
and it still does not work.
Where is my mistake ?
Have your handler like this:
this.todayScrollerRef = function() {
console.log('sd');
};
to Bind
$( window).bind( "scroll", this.todayScrollerRef );
to unbind:
$(window).unbind( "scroll", this.todayScrollerRef );

Drag event prevent mouse event

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

OnClick not working when rendering React button on a custom dialog

I am a little bit lost hope someone with JS knowledge could help.
I am using this dialog: https://github.com/NBTSolutions/Leaflet.Dialog, on a leaflet map.
It is nothing much just opens a dialog on map when you call method like:
let dialog = L.control.dialog({
size: [300, 300],
anchor: [70, 0]
});
dialog.setContent("<div id='camera-view-container'></div>")
dialog.addTo(that.mymap); // adds dialog on the map
You can see in the content I deliberately put a div with some ID because later I have code:
ReactDOM.render(<button onClick={()=>{alert("test")}}>Test</button>, document.getElementById('camera-view-container'));
The thing is I can see the button on the dialog, however, the click handler doesn't work?
What can be causing this problem?
In which part of code should I look for solution?
Thanks
Very strangely if I:
Put the button inside a component and
Inside component render method I put:
<button className="buttons" ref={(save) => this.save = save}>Save</button>
And finally in componentDidMount of that component I do:
this.save.addEventListener("click", () => {alert("test")});
Then it works.
Why?
So here is the problem
When you put the button in leaflet dialog as content it is not in DOM until the dialog gets displayed. So you cannot target it until it appears (or loaded fully).
There are some builtin functions of how leaflet dialog behaviors when you show it
You must have set map element somewhere like -
var map = L.map('map').setView([42.8962176,-78.9247419], 12);
So you set the events when dialog is opened
map.on('dialog:opened', function(e){ console.log(e.target); //your content element });
You get the target as content. This is the way to go. You can try calling the method inside :opened callback.
For all instances of leaflet you can go in the view source
http://nbtsolutions.github.io/Leaflet.Dialog/
Here you will get set of methods
map.on('dialog:opened', function(e){ console.log("dialog opened event fired."); });
map.on('dialog:closed', function(e){ console.log("dialog closed event fired."); });
map.on('dialog:destroyed', function(e){ console.log("dialog destroyed event fired."); });
map.on('dialog:locked', function(e){ console.log("dialog locked event fired."); });
map.on('dialog:unlocked', function(e){ console.log("dialog unlocked event fired."); });
map.on('dialog:frozen', function(e){ console.log("dialog frozen event fired."); });
map.on('dialog:unfrozen', function(e){ console.log("dialog unfrozen event fired."); });
map.on('dialog:updated', function(e){ console.log("dialog updated event fired."); });
map.on('dialog:resizestart', function(e){ console.log("dialog resizestart event fired."); });
map.on('dialog:resizing', function(e){ console.log("dialog resizing event fired."); });
map.on('dialog:resizeend', function(e){ console.log("dialog resizeend event fired."); });
map.on('dialog:movestart', function(e){ console.log("dialog movestart event fired."); });
map.on('dialog:moving', function(e){ console.log("dialog moving event fired."); });
map.on('dialog:moveend', function(e){ console.log("dialog moveend event fired."); });
map.on('dialog:closehidden', function(e){ console.log("dialog closehidden event fired."); });
map.on('dialog:closeshown', function(e){ console.log("dialog closeshown event fired."); });
map.on('dialog:resizehidden', function(e){ console.log("dialog resizehidden event fired."); });
map.on('dialog:resizeshown', function(e){ console.log("dialog resizeshown event fired."); });

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?

MooTools custom drag event

Is there anyway to define a drag event in MooTools using the mousedown, mouseup and mousemove events. I would like to be able to do something like the following:
$('#knob').addEvent('drag', function (e) {
// Drag event code goes here...
});
Dragging
Although Mootools has implemented all you need for drag, drop, slide and similar effects, writing your own event is a good way to learn how events work. Here is an example of how to add additional custom event by using the Element.Events Object.
Effect starts on mousedown event that registers mousemove event. When dragging is over mouseup event is fired that removes the mousemove event listener.
Since it can happen that mouse leaves the box (mouseup is not fired to clean up), mouseout event is added also.
At every step of the effect, drag event handler is launched with the original event object passed as argument, You can see the type of the original event with console.log( e.type );
window.addEvent( 'domready', function() {;
Element.Events.drag = {
// the function that will get fired when the custom event is added
onAdd: function() {
this.addEvents({
mousedown: function(e) {
this.store( 'x', e.page.x - this.getPosition().x );
this.store( 'y', e.page.y - this.getPosition().y );
this.addEvents({
mousemove: function(e) {
this.setPosition({
x: e.page.x - this.retrieve( 'x' ),
y: e.page.y - this.retrieve( 'y' )
});
this.fireEvent( 'drag', e );
},
mouseout: function(e) {
this.fireEvent( 'mouseup', e );
}
});
},
mouseup: function(e) {
this.removeEvents( 'mousemove' );
this.removeEvents( 'mouseout' );
this.fireEvent( 'drag', e );
}
});
},
// the function that will get fired when the custom event is removed
onRemove: function() {
this.removeEvents( 'mousedown' );
this.removeEvents( 'mouseup' );
}
};
$('draggable').addEvent( 'drag', function( e ) {
console.log( e.type );
});
// $('draggable').removeEvents( 'drag' );
});
A few good articles about Mootools events:
mootools.net
ryanflorence.com

Categories

Resources