I have 2 elements box1 and box2. Both of them added mousewheel event.
I put the mouse on the box2, and scroll the mousewheel, it console the 'box2'.
Keep scroll the mousewheel. Then translate them after a few seconds.
So now the mouse is on the box1, but it still console 'box2', you have stop the mousewheel the scroll again, it will console the 'box1'. Is that a bug?
Check the link below.
const box1 = document.querySelector(".box1")
const box2 = document.querySelector(".box2")
box1.addEventListener("mousewheel", function() {
console.log("box1")
})
box2.addEventListener("mousewheel", function() {
console.log("box2")
})
setTimeout(() => {
box1.style.transform = "translateY(100px)"
box2.style.transform = "translateY(100px)"
}, 5000)
https://codepen.io/chenminglei/pen/YzLKjQr?editors=1111
Related
I'm using Cocos2d-JS and need to find a way to listen for a mouse button hold. It seems limited in that there's only onMousemove, onMouseDown, and onMouseUp. All of those only get fired once. How do I use them to detect when a mouse button is being held down? I can't just use onMouseDown since that's being used to perform an action if the button is clicked.
I can suggest the following solution for this. You can have a counter. onMouseDown will launch a method that will increment the counter via setInterval and check whether the counter reached the target value. If the value is reached, it will trigger whatever you want to be triggered by mouse button hold. onMouseUp will wipe off the interval counter. Here is the simplified code. Assuming these to be methods of an object.
onMouseDown: function() {
this.launchTimer();
},
launchTimer: function() {
//Timer will update every 100ms
this.counter = 0;
this.timer = setInterval(() => {
//Assume our target value is 1s or 1000ms
if (this.counter === 1000) {
//Launch your function here
this.onMouseHold();
this.clearTimer();
} else {
this.counter += 100;
}
}, 100);
this.timer();
},
clearTimer: function() {
this.counter = 0;
clearInterval(this.timer);
},
onMouseUp: function() {
this.clearTimer();
}
I see that there is ol interaction that can be done upon click or single click or pointer move - however, is there one that can be done with mousedown/mouseup? In short, we want the user to be able to edit a feature as long as the mouse button in clicked but saved/stopped upon mouse button release.
featureRotateDown = new ol.interaction.Select({
condition: ol.events.condition.pointerdown
});
featureRotateUp = new ol.interaction.Select({
condition: ol.events.condition.pointerup
});
map.addInteraction(featureRotateDown);
map.addInteraction(featureRotateUp);
featureRotateDown.on('select', function(event) {
$.each(event.selected, function (index, feature) {
console.log(feature);
console.log('1');
});
});
featureRotateUp.on('select', function(event) {
$.each(event.selected, function (index, feature) {
console.log(feature);
console.log('3');
});
});
In other words, imagine a marker placed on a map that is an arrow. I want to ability to rotate it around as much as I want while the cursor is on the marker and the mouse button is pressed down.
Try pointerdown and pointerup:
map.on('pointerdown', function (event) {
// doStuff...
// ALTERNATIVE 1: get a feature at click position (with very small tolerance)
map.forEachFeatureAtPixel(event.pixel, function(feature, layer){
// doStuff with your feature at click position
});
// ALTERNATIVE 2: get the closest feature
closestFeature = yourVectorSource.getClosestFeatureToCoordinate(event.coordinate);
})
map.on('pointerup', function (event) {
// doStuff...
})
In the functions you can access the features using forEachFeatureAtPixelor getClosestFeatureToCoordinate.
Also see this JSFiddle
I started to use recently an awesome plug-in to convert touch evens to mouse clicks. But just today I came across one problem
jQuery('.draggable').click(function(){
alert('clicked');
})
To fire alert I need to make two touches(mobile device), while on computer I need only one mouse click. What can be the problem? Thank you.
// set a var as false as a way to change and flag if something is being dragged
var dragCheck = false;
$('.element').draggable({
revert: true,
drag: function(){
// On drag set that flag to true
dragCheck = true;
},
stop: function(){
// On stop of dragging reset the flag back to false
dragCheck = false;
}
});
// Then instead of using click use mouseup, and on mouseup only fire if the flag is set to false
$('.element') .bind('mouseup', function(){
if(dragCheck == false){
// do the click action here...
}
});
I have a CustomizableUI.jsm button i add to the toolbar. On click of this it opens a panel which has a chrome page loaded.
I want all windows to open this same panel. So my thought was to add the panel to Services.appShell.hiddenDOMWindow and then open it anchored to the the CustomizableUI.jsm button.
However I'm having trouble adding the panel to the hidddenDOMWindow.
This code works fine from scratchpad if you make the first line be var win = window. But if you make it be var win = Services.appShell.hiddenDOMWindow it has trouble appending the panel to the popupset. So weird.
Code here is the appShell hidden window code. If you make it var win= window it works fine:
var win = window; //Services.appShell.hiddenDOMWindow;
var panel = win.document.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul','panel');
var props = {
type: 'arrow',
style: 'width:300px;height:100px;'
}
for (var p in props) {
panel.setAttribute(p, props[p]);
}
var popupset = win.document.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul','popupset');
popupset.appendChild(panel);
win.document.documentElement.appendChild(popupset);
panel.addEventListener('popuphiding', function (e) {
e.preventDefault();
e.stopPropagation();
//panel.removeEventListener('popuphiding', arguments.callee, false); //if dont have this then cant do hidepopup after animation as hiding will be prevented
panel.addEventListener('transitionend', function () {
panel.hidePopup(); //just hide it, if want this then comment out line 19 also uncomment line 16
//panel.parentNode.removeChild(panel); //remove it from dom //if want this then comment out line 18
}, false);
panel.ownerDocument.getAnonymousNodes(panel)[0].setAttribute('style', 'transform:translate(0,-50px);opacity:0.9;transition: transform 0.2s ease-in, opacity 0.15s ease-in');
}, false);
panel.openPopup(window.document.documentElement, 'overlap', 100, 100);
I am trying to drag an element without keeping the mouse button down.
The behavior I would like is :
I click on a draggable item
Drag my item without keeping mouse left click down : just follow the mouse as a cursor
I click on a droppable container to confirm and append my item
I am able to simulate this behavior if I add an alert box durring the start event.
start : function(){
alert('test')
},
Here is the fiddle : http://jsfiddle.net/QvRjL/103/
How is it possible to code this behavior without the alert box?
Here is a good solution about this problem : Trigger Click-and-Hold Event
http://jsfiddle.net/VXbpu/1/
http://jsfiddle.net/vPruR/70/
var click = false;
$(document).bind('mousemove', function (e) {
if (click == true) {
$('#your_div_id').css({
left: e.pageX,
top: e.pageY
});
}
});
$('#your_div_id').click(function() {
click = !click;
return false;
});
$('html').click(function() {
click = false;
});