I have two buttons that use Javascript to call their function which controls a carousel and some other actions.
I'd simply like to disable the ability of the user to doubleclick the button.
Here is my code:
var onRightArrow = function(e) {
//alert("Right");
if (unitCtr<=unitTotal) {
unitCtr++;
TweenLite.to(productTxt, 0.2, {y: "-="+unitHeight });
TweenLite.to(productImg, 0.2, {y: "-="+unitHeight });
}
hideArrows();
}, onLeftArrow = function(e) {
//alert("Left");
if (unitCtr>1) {
unitCtr--;
TweenLite.to(productTxt, 0.2, {y: "+="+unitHeight });
TweenLite.to(productImg, 0.2, {y: "+="+unitHeight });
}
hideArrows();
}
arrowRight.addEventListener('click', onRightArrow, false);
arrowLeft.addEventListener('click', onLeftArrow, false);
I'm aware of the dblclick line of code but not exactly sure how to apply to disable the double click action from the mouse.
When the user doubleclicks now, it misplaces the positioning of the elements in the carousel which is why I want to remove the ability of the dblclick to affect the button.
Thanks in advance for any advice. Please avoid providing answers in JQuery.
More code:
http://codepen.io/anon/pen/QjGydw
I solved this myself, while the answer is more complex, is anyone is looking to apply listeners to disable the ability to doubleclick, it's here:
(arrowRight and arrowLeft are variables that have been defined by ID)
arrowRight.addEventListener('dblclick', function(e){
e.preventDefault();
});
arrowLeft.addEventListener('dblclick', function(e){
e.preventDefault();
});
I also created functions that disable the arrow while animation is happening to prevent errors. Reenables after animation completes. Functions look like this:
function disableArrows() { //ADDED NEW FUNCTION TO DISABLE ARROWS
arrowRight.removeEventListener('click', onTopArrow, false);
arrowLeft.removeEventListener('click', onBottomArrow, false);
}
function enableArrows() { //ADDED NEW FUNCTION TO RE-ENABLE ARROWS
arrowRight.addEventListener('click', onTopArrow, false);
arrowLeft.addEventListener('click', onBottomArrow, false);
}
Related
In Hammer.js 2.02, how do you detect when a press gesture has ended?
I have a 'press' recognizer on an element with a time of 1 which prints a message as soon as the press event starts. But how do I check when the user has lifted their finger? Right now I'm using the 'pressup' recognizer which nearly works, except that it only triggers if the user has held their finger down for >500ms. How can I check when shorter presses end?
var pressOptions = {
event: 'press',
pointer: 1,
threshold: 5,
time: 1
};
var trackpadRight = $('#trackpad-right').hammer();
trackpadRight.data("hammer").get('press').set(pressOptions);
trackpadRight.bind('press', function(ev) {
console.log("PRESSS DOWN");
});
trackpadRight.bind('pressup', function(ev) {
console.log("PRESS UP");
});
Just use Hammer without jQuery.
var pressOptions = {
// event: 'press', //no need to pass defaults
// pointer: 1,
// threshold: 5,
time: 1
};
var trackpadRightTouch = new Hammer(document.getElementById('trackpad-right'));
trackpadRightTouch.get('press').set(pressOptions);
trackpadRightTouch.on('press', function(ev) {
console.log("PRESSS DOWN");
});
trackpadRightTouch.on('pressup', function(ev) {
console.log("PRESS UP");
});
this should work.
From your comment, I thought you need to detect the touch release. If yes then you can use the default "touchend" event by directly bind to the element, like below:
$('#trackpad-right').bind('touchend', function(ev) {
console.log("PRESS UP");
});
I have a side bar which when you mouseover it slides over the content, when you mouseout it slides back. All working great.
I then have a button which when you click it, it locks the sidebar in place, pushing the content behind over. Locking the sidebar in place. Also works great..
My problem is that I wish for when the sidebar to be locked, to disable the hover, and keep it in the expanded state, then when you unlock it, to go back and re-enable hovering.
Fiddle
Thanks
$('.sec-sidebar-toggle').click(function (e) {
e.preventDefault();
if ($(this).closest('.sec-sidebar').hasClass('sidebar-locked')) {
//unlocked
$(this).closest('.sec-sidebar').removeClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({
width: '38px'
}, 300).css({
'overflow': 'visible'
});
} else {
//locked
$(this).closest('.sec-sidebar').addClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({
width: '253px'
}, 300).css({
'overflow': 'visible'
});
}
});
//Hover
$('.sec-sidebar').mouseover(function () {
$(this).find('.sec-nav').stop().animate({
marginLeft: '0px'
}, 300);
}).mouseout(function () {
$(this).find('.sec-nav').stop().animate({
marginLeft: '-215px'
}, 300);
});
You can unbind the mouseover and mouseout events.
http://jsfiddle.net/3n1gm4/VEUe9/
$('.sec-sidebar-toggle').click(function(e){
e.preventDefault();
if( $(this).closest('.sec-sidebar').hasClass('sidebar-locked') ){
//unlocked
$(this).closest('.sec-sidebar').removeClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({width: '38px'}, 300).css({'overflow': 'visible'});
// ADD EVENT HANDLERS
setupHover();
} else{
//locked
$(this).closest('.sec-sidebar').addClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({width: '253px'}, 300).css({'overflow': 'visible'});
// REMOVE EVENT HANDLERS
$('.sec-sidebar').unbind('mouseover');
$('.sec-sidebar').unbind('mouseout');
}
});
function setupHover() {
//Hover
$('.sec-sidebar').mouseover(function(){
$(this).find('.sec-nav').stop().animate({marginLeft: '0px'}, 300);
}).mouseout(function(){
$(this).find('.sec-nav').stop().animate({marginLeft: '-215px'}, 300);
});
}
setupHover();
I have wrapped the mouseout function in an IF statement to check whether the sidebar has the sidebar-locked class. If it does the following animation will not be executed.
if(!$('.sec-sidebar').hasClass('sidebar-locked')){
$(this).find('.sec-nav').stop().animate({marginLeft: '-215px'}, 300);
}
Is this what you were hoping to achieve?
Here is the JsFiddle.
Note: The ! at the start of the IF statement is to say IF NOT. So, If not this class in the above example.
There are two easy solutions in my head.
1: You could check the classes of the sidebar if 'sidebar-locked' is present with .hasClass() in the mouseevents.
2: You could remove the mouse events completely by unbinding them when you lock it and rebinding them when you unlock it.
See jQuery API: unbind.
Sidenote:
Consider using the hover event instead of the two seperate mouse events.
You should to clear mouseover event handler, and reassign it back when it needs.
Remove an event handler.
how can I trigger two mouse events simultanious (hold right clic and mouse weel) I have to press the right button of the mouse and hold on and at the same time I roll the wheel
$("selector").bind("click mousewheel", (function(event, delta) {
console.log("xxx")});
This may be not exactly you want but it works...
Fiddle here
var rightButtonDown = false;
$(document).mousedown(function (e) {
if (e.which === 3) rightButtonDown = true;
});
$(document).mouseup(function (e) {
if (e.which === 3) rightButtonDown = false;
});
$(document).mousewheel(function (event, delta, deltaX, deltaY) {
if (rightButtonDown) {
console.log("fire!")
}
});
Include a jQuery plugin to handle the mousewheel event.
Try this demo http://jsfiddle.net/HeDPZ/
Try event mousedown for any kind of click i.e. right or left.
Behavior - with the mouse click of when you move wheel you will see an alert poping.
Another thing is there is a small syntax error in your closing brackets.
For OP: Do you mind telling us bit more as to what kind of functioanlity you are aiming for just so that we can help you out in more detail.
Captureing event like this http://jsfiddle.net/dQWNY/ more here: Detect middle button click (scroll button) with jQuery
Left - 1
Middle - 2
Right - 3
I hope this is fits your need :)
Code
$(".vendor-icon").bind("mousedown mousewheel", function (event, delta) {
alert("xxx");
});
Associated html
I have a draggable <div> with a click event and without any event for drag,
but after I drag <div> the click event is apply to <div>.
How can prevent of click event after drag?
$(function(){
$('div').bind('click', function(){
$(this).toggleClass('orange');
});
$('div').draggable();
});
http://jsfiddle.net/prince4prodigy/aG72R/
FIRST attach the draggable event, THEN the click event:
$(function(){
$('div').draggable();
$('div').click(function(){
$(this).toggleClass('orange');
});
});
Try it here:
http://jsfiddle.net/aG72R/55/
With an ES6 class (No jQuery)
To achieve this in javascript without the help of jQuery you can add and remove an event handler.
First create functions that will be added and removed form event listeners
flagged () {
this.isScrolled = true;
}
and this to stop all events on an event
preventClick (event) {
event.preventDefault();
event.stopImmediatePropagation();
}
Then add the flag when the mousedown and mousemove events are triggered one after the other.
element.addEventListener('mousedown', () => {
element.addEventListener('mousemove', flagged);
});
Remember to remove this on a mouse up so we don't get a huge stack of events repeated on this element.
element.addEventListener('mouseup', () => {
element.removeEventListener('mousemove', flagged);
});
Finally inside the mouseup event on our element we can use the flag logic to add and remove the click.
element.addEventListener('mouseup', (e) => {
if (this.isScrolled) {
e.target.addEventListener('click', preventClick);
} else {
e.target.removeEventListener('click', preventClick);
}
this.isScrolled = false;
element.removeEventListener('mousemove', flagged);
});
In the above example above I am targeting the real target that is clicked, so if this were a slider I would be targeting the image and not the main gallery element. to target the main element just change the add/remove event listeners like this.
element.addEventListener('mouseup', (e) => {
if (this.isScrolled) {
element.addEventListener('click', preventClick);
} else {
element.removeEventListener('click', preventClick);
}
this.isScrolled = false;
element.removeEventListener('mousemove', flagged);
});
Conclusion
By setting anonymous functions to const we don't have to bind them. Also this way they kind of have a "handle" allowing s to remove the specific function from the event instead of the entire set of functions on the event.
I made a solution with data and setTimeout. Maybe better than helper classes.
<div id="dragbox"></div>
and
$(function(){
$('#dragbox').bind('click', function(){
if($(this).data('dragging')) return;
$(this).toggleClass('orange');
});
$('#dragbox').draggable({
start: function(event, ui){
$(this).data('dragging', true);
},
stop: function(event, ui){
setTimeout(function(){
$(event.target).data('dragging', false);
}, 1);
}
});
});
Check the fiddle.
This should work:
$(function(){
$('div').draggable({
start: function(event, ui) {
$(this).addClass('noclick');
}
});
$('div').click(function(event) {
if ($(this).hasClass('noclick')) {
$(this).removeClass('noclick');
}
else {
$(this).toggleClass('orange');
}
});
});
DEMO
You can do it without jQuery UI draggable. Just using common 'click' and 'dragstart' events:
$('div').on('dragstart', function (e) {
e.preventDefault();
$(this).data('dragging', true);
}).on('click', function (e) {
if ($(this).data('dragging')) {
e.preventDefault();
$(this).data('dragging', false);
}
});
You can just check for jQuery UI's ui-draggable-dragging class on the draggable. If it's there, don't continue the click event, else, do. jQuery UI handles the setting and removal of this class, so you don't have to. :)
Code:
$(function(){
$('div').bind('click', function(){
if( $(this).hasClass('ui-draggable-dragging') ) { return false; }
$(this).toggleClass('orange');
});
$('div').draggable();
});
With React
This code is for React users, checked the draggedRef when mouse up.
I didn`t use click event. The click event checked by the mouse up event.
const draggedRef = useRef(false);
...
<button
type="button"
onMouseDown={() => (draggedRef.current = false)}
onMouseMove={() => (draggedRef.current = true)}
onMouseUp={() => {
if (draggedRef.current) return;
setLayerOpened(!layerOpened);
}}
>
BTN
</button>
I had the same problem (tho with p5.js) and I solved it by having a global lastDraggedAt variable, which was updated when the drag event ran. In the click event, I just checked if the last drag was less than 0.1 seconds ago.
function mouseDragged() {
// other code
lastDraggedAt = Date.now();
}
function mouseClicked() {
if (Date.now() - lastDraggedAt < 100)
return; // its just firing due to a drag so ignore
// other code
}
I have make this: This In the right you see a red button. When you click on the red button. The content screen with the text is coming. But i have a question of this. Can i make this with a other animation. If you hold your mouse. Then you can slide open. With your mouse button to left. Then the content box open. Do you understand it? I hope you can help me.
You can see the code on jsfiddle. And you can change it there. I hope you can help me. I am a starting javascripter. And how And have no idea how I can make this.
To implement dragging, you can make use of mousedown/mouseup/mousemove like this: http://jsfiddle.net/pimvdb/25y4K/8/.
$(function () {
"use strict";
var box = $(".what-is-delicious"),
button = $(".what-is-delicious > a");
var mouseDown = false,
grabbed = 0,
start = -303;
button.mousedown(function(e) {
mouseDown = true;
$('*').bind('selectstart', false); // prevent selections when dragging
grabbed = e.pageX; // save where you grabbed
$("body").append('<div class="background-overlay"></div>');
});
$('body').mouseup(function() {
mouseDown = false;
$('*').unbind('selectstart', false); // allow selections again
$(".background-overlay").remove();
start = parseInt(box.css('right'), 10); // save start for next time
// (parseInt to remove 'px')
}).mousemove(function (e) {
if(mouseDown) { // only if you are dragging
// set right to grabbed - pageX (difference) + start 'right' when started
// dragging. And if you drag too far, set it to 0.
box.css("right", Math.min(grabbed - e.pageX + start, 0));
}
});
});
Here is an updated fiddle. Basically I just did a couple of things:
Changed the handler from "click" to "mouseenter"
Added a "mouseleave" handler that does the opposite thing
Put the handlers on the "what-is-delicious" container instead of the <a>
The code:
$(function () {
"use strict"
var box = $(".what-is-delicious"),
button = $(".what-is-delicious > a");
box.mouseenter(function (e) {
e.preventDefault();
if ($(button).hasClass("open")) {
} else {
$("body").append('<div class="background-overlay"></div>');
button.addClass("open");
box.animate({ right: "0"}, 750);
}
}).mouseleave(function (e) {
e.preventDefault();
if ($(button).hasClass("open")) {
$("body").find('div.background-overlay').remove();
button.removeClass("open");
box.animate({ right: -303}, 750);
} else {
}
});
});
The "preventDefault()" calls aren't really necessary anymore but I left them there.
I would assume you are toggling the Style.Display of the DIV currently in an OnClick() event.
The same code can be called from a Hover() or MouseOver()