I have a div that is draggable. The "splitter" that is used for dragging it / toggling it, it's supposed to allow expanding and collapse only on doubleclick. (Or simple drag and expand).
The functionality works fine, but once the div is in the collapsed state, it repositions/opens up to some 10px width, when just 'clicking' on the splitter. I.e, single click/mousedown.
I have tried stopEvent, return false, also all other possibilities of fixing it, but it won't stop from expanding on single click
This is not supposed to happen. Any help would be appreciated.
To solve this problem I think you will need to add some extra state to your DOM node containing a flag if the object moved or not. If it really moved, then the click event should not be fired.
An example of adding the state:
lang.mixin(domNode, {
moved: false
});
Then, when the Move event is fired, you set the flag to true, for example:
moveable.on("Move", function(mv, pos, evt) {
if (evt.target.moved === false) {
console.log("Drag detected");
}
evt.target.moved = true;
});
In the click event handler you will have to verify if the flag is changed to true or not and put it back to false (for the next moves). For example:
on(domNode, "click", function(evt) {
if (evt.target.moved === false) {
// Execute your logic here
}
});
Of course, this isn't the most elegant solution (but it works). The most beautiful solution would be that you extend the Moveable yourself and make it work to your needs.
I tested it out with a JSFiddle, which you can see here.
Related
I have a carousel and I need to make him work as Instagram carousel does.
On click change slide, but on mousedown just stop animation. My JQuery :
$(".fancy-carousel").on('mousedown',function (e) {
...stop animation
});
$(".fancy-carousel").on('mouseup',function (e) {
..continue animation
});
$(".fancy-carousel").on('click',function (e) {
..change slide
});
But i don´t know how can i let script know about difference between "click" and "mousedown". When i click on element and hold for a time, it stop animation but after "mouseup" it trigger "click" event too. Is there any way how to split this events? Or should i do it with some calculating of mouse hold time?
A “click” is just a full cycle of a “mousedown” and a “mouseup”. You can’t have one without the other.
For your code to know the difference, you’ll need a variable that tracks your intentions.
Create a variable to track your intention - default it to “click”.
var intention = "click";
In your mousedown function, pause the animation and start a timer. We will use this timer to detect how long the mouse is down for (I.e, if it’s for over a second, it’s not a click and you just want to trigger mouseup)
var detectIntention = setTimeout(function(){
intention = "mouseup";
})
In your mouse up function, cancel this timeout. If mouse up is called after just a few MS, then you want to do a click.
clearTimeout(detectIntention);
if (intention === "mouseup") {
// do mouseup stuff
}
// reset intention
intention = click;
Check in your click function that you wanted to do a click;
if (intention === "click") {
// do click stuff
}
I've created a fiddle to reproduce the problem.
https://jsfiddle.net/rvwp47Lz/23/
callback: function (key, option) {
console.log("You clicked the test button", this);
// Need the iframe contents to regain focus so the mouse events get caught
setTimeout(function () {
$iframe[0].contentWindow.focus();
}, 100);
}
Basically, what I want to happen is the mouse move events to be caught after closing the context menu.
I can call focus on the iFrame's body or document but it doesn't seem to have any effect.
After you right click one of the items within the iframe and select an item, the mousemove event on the iframes body is no longer called (you can also notice that the hover CSS effect on the items are no longer working).
Ideas?
After some debugging and playing around with jQuery.contextMenu's code it seems the issue actually comes from the itemClick function. I added comments to the code and will add an issue to their github for a possible fix (unless there's some reason they're disabling default here)
// contextMenu item click
itemClick: function (e) {
var $this = $(this),
data = $this.data(),
opt = data.contextMenu,
root = data.contextMenuRoot,
key = data.contextMenuKey,
callback;
// abort if the key is unknown or disabled or is a menu
if (!opt.items[key] || $this.is('.' + root.classNames.disabled + ', .context-menu-submenu, .context-menu-separator, .' + root.classNames.notSelectable)) {
return;
}
// This line is causing the issue since it's preventing the default actions which puts
// mouse events back into place. Chrome must disable mouse move events when the contextmenu event
// gets triggered to improve performance.
//e.preventDefault();
e.stopImmediatePropagation();
I asked here (How to detect right click + left click) how to detect when user right click hold it and click on the left button of the mouse
I did like the first answer but its not working as expected,
First in my code I create table and td's, and then I add events to every td like that:
td.setAttribute('onmousedown', "handleMouseDown(event)");
td.setAttribute('onmouseup', "handleMouseUp(event)");
td.setAttribute('onclick', "checkCell(this)");
I dont use addEventListener` because IE < 9.
The two functions to handle the events is:
function handleMouseDown (e) {
if (e.button == 2) rightClicked = true;
}
function handleMouseUp (e) {
if (e.button == 2) rightClicked = false;
}
First its dosent work good, the handleMouseUp dosen't always set rightClicked to false
when I was clicked on left button its dosent set rightClicked to false when I release the right button
so I add to checkCell if rightClicked is true so set it to false.
if (rightClicked) {
rightClicked = false;
Now In the first time I click right click and left its work, but after that its not work anymore unless continue to press left click and after that sometimes it work
Sometimes its dosent work even the first time
My all code in jsfiddle: https://jsfiddle.net/e4pf78zu/
Its dosent work fine there the functions shown in the console as undefined I dont know why can someone fix that for me thanks
This doesn't work for a couple of reasons.
First of all you are setting the event listeners for each cell in a very weird way, not to mention you are doing it wrong.
td.setAttribute('onmousedown', "handleMouseDown(event)");
Why didn't you simply do
td.onmousedown = handleMouseDown;
Also, you are doing handleMouseDown(event), which I am pretty sure is wrong.
In general, please don't add your event handlers like this.
I dont use addEventListener` because IE < 9.
IE9 and below don't support addEventListener but they do support attachEvent which is probably better than doing .on<EventName> = function(){}, or what you are doing there currently.
Moreover you can even simulate addEventListener in these browsers as well. Simply use this polyfill here, and in general read about addEventListener
the handleMouseUp dosen't always set rightClicked to false when I was clicked on left button
rightClicked is supposed to become false only when you release the right button, so that works as expected.
its dosent set rightClicked to false when I release the right button
Well, based on the code you provided, that's impossible. The code pretty clearly says
if (e.button == 2) rightClicked = false;
so I add to checkCell if rightClicked is true so set it to false.
This was probably not needed. Resolve your other issues first and then see if you really need to do this.
There are two elements in play:
$('#myInput') // an input field for search
$('#myList') // a list to display search results
I want to hide the list when the input no longer has focus, like so:
$('#myInput').blur(function() {
$('#myList').hide();
});
This works great, except when a list item is clicked, because the blur event fires and hides the list before the click is registered. The goal is for the list to stay visible when any part of the list is clicked, even though this will cause the input to blur.
How can I do this? Thanks!
You can accomplish this by keeping a global variable, and setTimouts, to wait a delay of 200ms and then check if one of the 2 elements have focus.
var keepFocus = false;
function hideList(){
if(!keepFocus){
$('#myList').hide();
}
}
$('#myInput').blur(function() {
keepFocus = false;
window.setTimeout(hideList, 200);
}).focus(function(){
keepFocus = true;
});
$('#myList').blur(function() {
keepFocus = false;
window.setTimeout(hideList, 200);
}).focus(function(){
keepFocus = true;
});
I've faced with the exact same problem, so this is how I solved it.
I came up with the fact that blur() fires earlier than click().
So I've tried to change click() to mousedown() and found out that mousedown() fires before blur().
And to imitate click() you'll have to fire mousedown() and then mouseup()
So in your case I would do something like this:
var click_in_process = false; // global
$('#myList').mousedown(function() {
click_in_process = true;
});
$('#myList').mouseup(function() {
click_in_process = false;
$('#myInput').focus();
// a code of $('#myList') clicking event
});
$('#myInput').blur(function() {
if(!click_in_process) {
$('#myList').hide();
// a code of what you want to happen after you really left $('#myInput')
}
});
Demo / example: http://jsfiddle.net/bbrh4/
Hope it helps!
You need to be able to say "do this blur() unless the list gains focus at the same time".
This question says how to detect if an element has focus: Using jQuery to test if an input has focus
Then all you need to do is:
$("#myInput").blur(function () {
if (!$("#myList").is(":focus")) {
$("#myList").hide();
}
});
Pigalev Pavel's answer above works great.
However, If you want an even simplier solution, you can just "prevent default" in the "mousedown" of an element to prevent the blur event from taking place. (since preventing default actually means that in the end, the input never looses focus in the first place!)
Of course, this is only if you're alright with preventing default in the div. It does have some side-effects, like the text is no longer selectable. As long as that's not an issue, this will work.
I suppose if you hold the mouse down over the div, move the mouse outside of the div, and then release the mouse, it also doesn't fire the "blur" event. But in my case, I wasn't too worried about that either, since the click started in the target div.
$("input").focus(function(){
$(this).val("");
});
$("input").blur(function(){
$(this).val("blur event fired!");
});
$("div").mousedown(function(e){
e.preventDefault();
})
div{
height: 200px;
width: 200px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
<div>
Click here to prevent blur event!
</div>
The best way to do this is to attach an event handler to the body element, then another handler to the list that stops event propagation:
$(body).click(function () {
$("#myList").hide();
});
$("#myList").click(function (e) {
e.stopImmediatePropagation();
});
This listens for a click outside of #myInput and hides #myList. At the same time, the second function listens for a click on #myList and if it occurs, it prevents the hide() from firing.
I have this:
function dontMove(event) {
// Prevent page from elastic scrolling
event.preventDefault();
}
&
<body ontouchmove="dontMove(event);">
This, on the ipad, stops it from being draggable and does not allow that grey background the ipad has when you drag a whole page around to show up.
I have seen on another website that its possible to reverse that in another div, so that div is completely draggable again.
Does anyone know how to reverse it?
I have also tried using this to prevent it (in the document.ready):
document.ontouchmove = function(e){
e.preventDefault();
}
& this to enable it:
function doTouchMove(state) {
document.ontouchmove = function(e){
return state;
}
}
Then I put this to activate it.
<img ontouchmove="doTouchMove(state);" src="../jpeg/pages/01.jpg" class="touch"/>
This didn't seem to work
Is there anything wrong with this?
Or any other way that might work?
This is exactly why bubbles is slightly better(at least in my opinion).
bubbles is cross browser, so you should be able to replace.
e.preventDefault()
with
e.bubbles = false;
and then latter in your code, you could potentially reset bubbles to true.
If the above isn't an option then just ignore. :D
An alternative(if you are just working with an iPad) is to just reverse how the DOM works.
document.addEventListener('click', function(){}, true );
This will force the event to work in the other direction.
Document click execute
|
|
v
Element click execute
try this post, HTML with event.preventDefault and erase ontouchmove from body tag.
Mine looks like this
<script>
// Get touch move enevt from IOS
document.ontouchmove = function (event) {
if (!event.elementIsEnabled)
event.preventDefault();
};
// Get touch move enevt from IOS
function enableOnTouchMove(event) {
event.elementIsEnabled = true;
};
</script>
then enable ontouchmove on every tag you want. ie:
<div ontouchmove="enableOnTouchMove(event)" id="listing">
I managed to solve it with
$('#form1').unbind('submit').submit();
You can solve it by preventing the event only if it comes from the body:
document.ontouchmove = function(event){
if(event.target.tagName == "BODY"){
event.preventDefault();
}
}