on clicking the outside the window the mousemove event has to be stopped`,i have detected the click outside the window on mouseleave,but how to prevent the default even?in Javascript
onTextContainerMouseLeave: function (e) {
if (this.curDown == true) {
var value;
$(window).on('mouseup', function (e) {
this.curDown = false;
e.preventDefault();
e.stopPropagation();
return false;
});
}
},
Put a condition inside your on-click that is true if the mouse was inside the control (which you already have according to what is written). If the condition is true then go on with the on-click events. Otherwise nothing happens.
$(window).on('mouseup', function (e) {
if (yourconditionhere) {
//Execute your code here --
}
});
Related
I want to create a swipe slide on mousedown event and mousemove, but on mouseup I want to stop the mousemove event.
slide.addEventListener("mousedown", e => {
console.log(e.clientX);
});
slide.addEventListener("mousemove", function move(e) {
// do Somthing
});
slide.addEventListener("mouseup", function stop(e) {
// stop the mousemove event
});
Try adding and removing the listener when you need:
function move(e) {
// do Somthing
}
slide.addEventListener("mousedown", e => {
console.log(e.clientX);
slide.addEventListener("mousemove", move);
});
slide.addEventListener("mouseup", function stop(e) {
slide.removeEventListener("mousemove", move);
});
Stopping mousemove is simple, just calling the slide.removeEventListener("mousemove", "function you're calling under mousemove");
just call it into the method you want to stop it
Use a flag in the common scope. Set it to true in mousedown and false in mouseup. Check it in mousemove
var pressing = false;
slide.addEventListener("mousedown", e => {
pressing = true;
});
slide.addEventListener("mousemove", function move(e) {
if (pressing) {
// do something only if mouse button is being pressed
}
});
slide.addEventListener("mouseup", function stop(e) {
pressing = false;
});
Why not just remove the event listener?
slide.addEventListener("mouseup", function stop(e) {
slide.removeEventListener("mousemove", function move(e) {});
});
I need to prevent hiding of a modal dialog when user clicks on the dialog, then moves the mouse outside of the dialog, and releases it. The dialog is placed inside outer div on which the click event is registered. Here is the example of the modal dialog and its setup.
So I've done the following:
var pointerDownElement = null;
$('.d1').on('mousedown', function(event) {
// this is how I do it to prevent triggering of click event
pointerDownElement = event.target;
// this is how a browser does it
pointerDownElement = event.currentTarget;
});
$('.d1').on('mouseup', function(event) {
var element = event.target;
if (element === pointerDownElement) {
console.log('triggering click');
}
});
Is this approach correct?
You're definitely on the right track. Slightly modified code:
var pointerDownElement = null;
$('.d1').on('mousedown', function(event) {
event.preventDefault();
pointerDownElement = event.currentTarget;
return false;
});
$('.d1').on('mouseup', function(event) {
if (event.target=== pointerDownElement) {
console.log('triggering click');
}
});
No need to assign a value to a variable if you're only going to use it once. Also, event.preventDefault(); and return false; will guarantee the default behavior of the event doesn't take place (not that there typically is one for mousedown, but I'm assuming you have a reason for including this code).
I have an event handler attached to touchstart and I want to call preventDefault as soon as touchmove occurs. I have this code currently.
link.addEventListener("click", function () {
console.log("clicked");
});
link.addEventListener("touchstart", function (touchStartEvent) {
var mouseMoveHandler = function () {
console.log("moved.");
touchStartEvent.preventDefault(); // This does not work.
link.removeEventListener('touchmove', arguments.callee);
};
link.addEventListener("touchmove", mouseMoveHandler);
});
http://jsfiddle.net/682VP/
I'm calling preventDefault for touchstart within an event handler for touchmove. This does not seem to work because the click event handler is always invoked.
What am I doing wrong here?
When you call preventDefault it works for touchstart event, not for click event.
You can add some property for the link object indicating the moving state and check it inside click handler itself (and stop it either by preventDefault or return false)
var link = document.getElementById("link");
link.addEventListener("click", function () {
if (this.moving) {
this.moving = false;
return false;
}
console.log("clicked");
});
link.addEventListener("touchstart", function (touchStartEvent) {
var mouseMoveHandler = function () {
console.log("moved.");
this.moving = true;
link.removeEventListener('touchmove', arguments.callee);
};
link.addEventListener("touchmove", mouseMoveHandler);
});
I want to bind two mouse events to a function (mousedown and moucemove). But I want to run the function only if both events are fired.
This will bind each event to to the function: (It's not what i want)
$("#someid").bind("mousedown mousemove", function (event) { someFunction(); });
I can do this and it works:
$("#someid").bind("mousedown", function (event) {
someFunction();
$("#someid").bind("mousemove", function (event) {
someFunction();
});
});
$("#someid").bind("mouseup", function (event) {
$("#someid").unbind("mousemove");
});
Is there a better, quicker way to do this???
Bind only to the mousemove event. If the left mouse button is pressed while you move, event.which will be 1.
$(document).on('mousemove', function(e) {
if (e.which == 1) {
//do some stuff
}
});
I guess you want the mousemove handler work only when the mouse button is pressed down? If so, I'd suggest using some kind of boolean flag. You toggle its state on mousedown and mouseup events:
var flag = false;
$('#someid')
.on('mousedown', function(e) {
flag = true;
})
.on('mouseup', function(e) {
flag = false;
})
.on('mousemove', function(e) {
if (!flag) {
return false;
}
// else... do your stuff
});
In my jQuery based code I use a button click event handler.
The problem described on title here occurs sometimes - approximately after 20 successfull clicks on the button. When it occurs, then I have to move mouse pointer out of the button area and move it again back over the button in order click event to be handled.
What could cause this strange behaviour?
Here is the event handler:
function advice() {
rebuildCacheBtnElem.bind("click", function (event) {
event.stopImmediatePropagation();
event.preventDefault();
switch (configBtnAction) {
case CONFIG_ACTION_REBUILD:
rebuildCacheBtnElem.text("Cancel");
configState = CONFIG_STATE_BUSY;
goNextConfigStep(configPages, configBtnAction, CONFIG_ACTION_FINISH);
worker(0, 0);
break;
case CONFIG_ACTION_FINISH:
if (configState == CONFIG_STATE_FINISHED_SUCCESS) {
treeId.populateTree();
}
else if (configState == CONFIG_STATE_BUSY) {
sendCommand({ cancel: cancelGUID }, function (data) {
resetGUI();
});
}
else {
resetGUI();
}
break;
}
window.console.log(configBtnAction);
});
}