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();
}
Related
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
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...
}
});
The open event of the jQuery UI tooltip fires not when the popup opens visibly but as soon as the mouse enters the element. It does not obey the show.delay property setting. This is documented behavior so I suppose it is not a bug.
So if I have tooltip on adjacent cells of a table, and the user drags the mouse across these cells, the actions in my open and close handlers are taken multiple times -- three, four, five times -- as many times as the number of cells the mouse entered.
What's a good way to exit the open event if the show.delay has not yet transpired?
EDIT: Not knowing how much time has elapsed on the delay.show, I've had to choose an arbitrary duration for the setTimeout, and track whether a class-switch is in progress using a flag:
<snip> ...
show: {
delay: 666
},
open: function (event, ui) {
if (me.changingClass) return;
me.changingClass = true;
$("td.baz").switchClass("foo", "bar");
},
close: function (event, ui, dupids) {
$("td.baz").switchClass("bar", "foo");
setTimeout(function () { me.changingClass = false; }, 200);
}
I think this may do the trick, if I understand what you're after:
Working Example
var timer;
$('td').tooltip({
show: {
delay: 2000 //number of milliseconds to wait
},
open: function (event, ui) {
var xthis = this;
timer = setTimeout(function () {
$(xthis).siblings().switchClass("bar", "foo");
}, 2000); // number of milliseconds to wait
},
close: function (event, ui, dupids) {
clearTimeout(timer);
$(this).siblings().switchClass("foo", "bar");
}
});
I have an image gallery with a series of thumbs. Both are loaded dynamically depending on how many images are associated with a product. You can click on a thumb to get that series of images. On a mobile device you can swipe left and right to see all the images. That all works fine.
Here's my issue: When you try to scroll down the page and you happen to be touching one of the main images you get stuck and the page doesn't move. For the life of me I cannot figure out a work around for this. I am wondering if anyone has ever encountered this and figured out a solution. I think there could be a way to control this via the touch-punch.js but cannot figure it out. Thank you.
Here is my simplified gallery HTML:
<ul id="Gallery" class="gallery productGalleryInner">
<li>
<a href="#"><img src="img.jpg" />/a>
<a href="#"><img src="img.jpg" />/a>
<a href="#"><img src="img.jpg" />/a>
<a href="#"><img src="img.jpg" />/a>
<a href="#"><img src="img.jpg" />/a>
</li>
</ul>
</div>
css:
#productGalleryWrap {
overflow: hidden;
margin: 7px 10px 0;
}
#productGalleryWrap .productGalleryInner {
white-space: nowrap;
}
#productGalleryWrap .productGalleryInner li {
display: inline;
}
#productGalleryWrap .productGalleryInner img {
display: inline;
width: 50%;
}
I am using touch-punch.js to control the horizontal drag. Here is the code:
(function ($) {
// Detect touch support
$.support.touch = 'ontouchend' in document;
// Ignore browsers without touch support
if (!$.support.touch) {
return;
}
var mouseProto = $.ui.mouse.prototype,
_mouseInit = mouseProto._mouseInit,
touchHandled;
/**
* Simulate a mouse event based on a corresponding touch event
* #param {Object} event A touch event
* #param {String} simulatedType The corresponding mouse event
*/
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault();
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
// Initialize the simulated mouse event using the touch event's coordinates
simulatedEvent.initMouseEvent(
simulatedType, // type
true, // bubbles
true, // cancelable
window, // view
1, // detail
touch.screenX, // screenX
touch.screenY, // screenY
touch.clientX, // clientX
touch.clientY, // clientY
false, // ctrlKey
false, // altKey
false, // shiftKey
false, // metaKey
0, // button
null // relatedTarget
);
// Dispatch the simulated event to the target element
event.target.dispatchEvent(simulatedEvent);
}
/**
* Handle the jQuery UI widget's touchstart events
* #param {Object} event The widget element's touchstart event
*/
mouseProto._touchStart = function (event) {
var self = this;
// Ignore the event if another widget is already being handled
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
return;
}
// Set the flag to prevent other widgets from inheriting the touch event
touchHandled = true;
// Track movement to determine if interaction was a click
self._touchMoved = false;
// Simulate the mouseover event
simulateMouseEvent(event, 'mouseup');
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
// Simulate the mousedown event
simulateMouseEvent(event, 'mousedown');
};
mouseProto._touchMove = function (event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Interaction was not a click
this._touchMoved = true;
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
};
/**
* Handle the jQuery UI widget's touchend events
* #param {Object} event The document's touchend event
*/
mouseProto._touchEnd = function (event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Simulate the mouseup event
simulateMouseEvent(event, 'mouseup');
// Simulate the mouseout event
simulateMouseEvent(event, 'mouseout');
// If the touch interaction did not move, it should trigger a click
if (!this._touchMoved) {
// Simulate the click event
simulateMouseEvent(event, 'click');
}
// Unset the flag to allow other widgets to inherit the touch event
touchHandled = false;
};
/**
* A duck punch of the $.ui.mouse _mouseInit method to support touch events.
* This method extends the widget with bound touch event handlers that
* translate touch events to mouse events and pass them to the widget's
* original mouse event handling methods.
*/
mouseProto._mouseInit = function () {
var self = this;
// Delegate the touch handlers to the widget's element
self.element
.bind('touchstart', $.proxy(self, '_touchStart'))
.bind('touchmove', $.proxy(self, '_touchMove'))
.bind('touchend', $.proxy(self, '_touchEnd'));
// Call the original $.ui.mouse init method
_mouseInit.call(self);
};
})(jQuery);
Please let me know if more info is needed. Thanks.
Kind of late answer but I had this same problem on a current project I'm working on.
Comment out:
event.preventDefault();
Add this after:
document.ontouchmove = function(e) {
var target = e.currentTarget;
while(target) {
if(checkIfElementShouldScroll(target))
return;
target = target.parentNode;
}
e.preventDefault();
};
Dolla dolla bills y'all.
Code taken from this thread: document.ontouchmove and scrolling on iOS 5