Develop Reference

Firefox firing dragleave when dragging over text

I'm attempting to track a dragenter/leave for the entire screen, which is so far working fine in Chrome/Safari, courtesy of the draghover plugin from https://stackoverflow.com/a/10310815/698289 as in:
$.fn.draghover = function(options) {
return this.each(function() {
var collection = $(),
self = $(this);
self.on('dragenter', function(e) {
if (collection.size() === 0) {
self.trigger('draghoverstart');
}
collection = collection.add(e.target);
});
self.on('dragleave drop', function(e) {
// timeout is needed because Firefox 3.6 fires the dragleave event on
// the previous element before firing dragenter on the next one
setTimeout( function() {
collection = collection.not(e.target);
if (collection.size() === 0) {
self.trigger('draghoverend');
}
}, 1);
});
});
};
function setText(text) {
$('p.target').text(text);
}
$(document).ready(function() {
$(window).draghover().on({
'draghoverstart': function() {
setText('enter');
},
'draghoverend': function() {
setText('leave');
}
});
});
However Firefox is still giving me problems when I drag over text items, here's a fiddle to demonstrate: http://jsfiddle.net/tusRy/6/
Is this a Firefox bug or can this be tamed with JS? Or is there a more robust method for performing all of this?
Thanks!
UPDATE: Updated fiddle to http://jsfiddle.net/tusRy/6/ to reduce clutter a bit. To explain the expected behavior of the fiddle:
Drag a file into the window and p.target should be "ENTER" colored yellow.
Drag a file out of the window and p.target should be "LEAVE" colored red.
Drop a file in the window and p.target should be "LEAVE" colored red.
In firefox, the LEAVE event is triggered when you drag the file over text.

As of version 22.0 Firefox is still doing this. When you drag over a text node it fires two kinds of dragenter and dragleave events: one where the event target and relatedTarget are BOTH the parent element of the text node, and another where the target is the parent element and the relatedTarget is the actual text node (not even a proper DOM element).
The workaround is just to check for those two kinds of events in your dragenter and dragleave handlers and ignore them:
try {
if(event.relatedTarget.nodeType == 3) return;
} catch(err) {}
if(event.target === event.relatedTarget) return;
I use a try/catch block to check the nodeType because occasionally events fire (inexplicably) from outside the document (eg. in other iframes) and trying to access their nodeType throws a permissions error.
Here's the implementation:
http://jsfiddle.net/9A7te/

1) Your dropzone should have only one child element, which might have everything else you need. Something like
<div id="#dropzone">
<div><!--Your contents here--></div>
</div>
2) Use this CSS:
#dropzone * { pointer-events: none; }
You might need to include the :before and :after since the * don't apply to them.
This should be enough to let the drop work in Firefox and Chrome. In your example, it should be enough to add:
body * { pointer-events: none; }
At the end of the CSS. I've done it here:
http://jsfiddle.net/djsbellini/eKttq/
Other examples:
http://jsfiddle.net/djsbellini/6yZV6/1/
http://jsfiddle.net/djsbellini/yR8t8/

I came up with kind of a solution, yet to test on other browsers other than Chrome and FF but working so far. This is how the setTimeout looks now:
setTimeout( function() {
var isChild = false;
// in order to get permission errors, use the try-catch
// to check if the relatedTarget is a child of the body
try {
isChild = $('body').find(e.relatedTarget).length ? true : isChild;
}
catch(err){} // do nothing
collection = collection.not(e.target);
if (collection.size() === 0 && !isChild) {
self.trigger('draghoverend');
}
}, 1);
The entire code here - http://jsfiddle.net/tusRy/13/.
The idea is to check if the related tag is a child of the body, in which case we are still in the Browsers and the draghoverend event should be not triggered. As this can throw errors when moving out of the windows, I used a try method to avoid it.
Well, perhaps somebody with more skills on JS could improve this :)

I found the answer in a non-selected answer to this SO question asking about dragleave firing on child elements. I have a <div> that has many children elements. An semi-opaque overlay <span> becomes visible over the <div> whenever there's a dragenter on the page. As you found, 'dragover' isn't like mouseover. It triggers dragleave whenever you hover over a child element.
The solution? Dragout It makes dragover work more like mouseover. Very short.

how to use Jquery :focus selector on input elements in iOS?

I'm using Jquery 1.7.1 and iPad1 iOS3.
I need to fire a function on scrollstart unless an input element has focus. The function below worked for a long time, but all of a sudden it doesn't (looking aroud I guess because of switching to Jquery 1.7.1)
$(document).on('scroll', function(){
if ( !$("input:focus").length > 0 ) {
self.hideAllPanels();
}
});
Specifically $('input:focus').length = 0, although I can detect the focus event triggering before the scroll event.
I have been fiddling with a workaround using:
if ( !$(document.activeElement).get(0).tagName == "input" ){
....
}
But I'm not sure when the activeElement is changing, because it seems to persist for quite a while even after I'm "leaving" the resprective element.
Question:
Any idea why I can't detect the focus-ed element on iOS? Some hints how I could set this up with activeElement, so on blur, I'm no longer having the input as activeElement are also welcome!
Thanks for help!

$(document).on('scroll', function(){
if (!$("input").is(':focus')) {
self.hideAllPanels();
}
});
This seems to work for me, but it will fire the function multiple times during scroll if an input element does not have focus.

jQuery + CSS cursor mousedown + Chrome = not working

I decided to make/test Cursors cross-browser, so far on Firefox its working perfect, but on Chrome - somewhat..
Now, the custom cursor shows, but when you click somewhere, it doesn't change, it does trigger mousedown event, but it doesn't change the cursor. I tried just mousedown(); and it changed the cursor. I guess the the mouseup event is causing this trouble.
$("body").mousedown(function() {
$("body").addClass("clicked");
console.log("down");
});
$("body").mouseup(function() {
$("body").removeClass("clicked");
console.log("up");
});
CSS
body {
cursor: url("../img/cursor1.cur"), default;
}
.clicked {
cursor: url("../img/cursor2.cur"), default;
}

Try clicking and moving the mouse.
I think chrome only changes cursor on mousemove.
EDIT: This is a known bug, see Getting the browser cursor from "wait" to "auto" without the user moving the mouse

I just tried out the following:
$('body').mousedown(function(){
$(this).css('background-color', 'red');
});
$('body').mouseup(function(){
$(this).css('background-color', 'green');
});
The result was as expected, click down -> red BG, click up -> green BG
BUT: this only happened, when i assigned css: html, body { height:100%; min-height:100%; }
Without the CSS the events were not really working as "fluent" as they should be.
Little tip: with firebug (at least chrome dev tools) you can monitor events using the following snipped:
monitorEvents( $$('body')[0] )
Hope this helped

The problem is that you are using the global window.event object, and not jQuery's event object. window.event only works in some browsers, and it is not a W3C standard.
jQuery normalizes the event object so it's the same in all browsers. The event handler is passed that jQuery event object as a parameter. You should be using that.
$(".class_name").mousedown(function (e) {
switch (e.which) {
case 1: //leftclick
//...
break;
case 3: //rightclick
//...
break;
}
});

how to disable MobileSafari auto-selection?

my webapp requires users to tap and hold on an element for a game action, but iPhone automatically "selects" the area which is confusing to the user.
anyone know what html elements prevent selection, or if javascript can block selection?
any help is appreciated

Try handling the selectstart event and returning false.
Try applying the CSS rule, -webkit-user-select: none;

SLaks answer is obviously right - I just want to extend it a bit for future viewers. If you're using jQuery, here's a useful extension method that disables selection in various browsers:
$.fn.extend({
disableSelection : function() {
this.each(function() {
this.onselectstart = function() { return false; };
this.unselectable = "on";
$(this).css('-moz-user-select', 'none');
$(this).css('-webkit-user-select', 'none');
});
}
});

Disable Drag and Drop on HTML elements?

I'm working on a web application for which I'm attempting to implement a full featured windowing system. Right now it's going very well, I'm only running into one minor issue. Sometimes when I go to drag a part of my application (most often the corner div of my window, which is supposed to trigger a resize operation) the web browser gets clever and thinks I mean to drag and drop something. End result, my action gets put on hold while the browser does its drag and drop thing.
Is there an easy way to disable the browser's drag and drop? I'd ideally like to be able to turn it off while the user is clicking on certain elements, but re-enable it so that users can still use their browser's normal functionality on the contents of my windows. I'm using jQuery, and although I wasn't able to find it browsing the docs, if you know a pure jQuery solution it would be excellent.
In short: I need to disable browser text selection and drag-and-drop functions while my user has the mouse button down, and restore that functionality when the user releases the mouse.

This works. Try it.
<BODY ondragstart="return false;" ondrop="return false;">

Try preventing default on mousedown event:
<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>
or
<div onmousedown="return false">asd</div>

You can disable dragging simply by using draggable="false" attribute.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable
http://www.w3schools.com/tags/att_global_draggable.asp

This might work: You can disable selecting with css3 for text, image and basically everything.
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
Of course only for the newer browsers. For more details check:
How to disable text selection highlighting
Note: there are obvious a few UX downsides to this since it prevents users from easily copying text, be aware of this.

With jQuery it will be something like that:
$(document).ready(function() {
$('#yourDiv').on('mousedown', function(e) {
e.preventDefault();
});
});
In my case I wanted to disable the user from drop text in the inputs so I used "drop" instead "mousedown".
$(document).ready(function() {
$('input').on('drop', function(event) {
event.preventDefault();
});
});
Instead event.preventDefault() you can return false. Here's the difference.
And the code:
$(document).ready(function() {
$('input').on('drop', function() {
return false;
});
});

This is a fiddle I always use with my Web applications:
$('body').on('dragstart drop', function(e){
e.preventDefault();
return false;
});
It will prevent anything on your app being dragged and dropped. Depending on tour needs, you can replace body selector with any container that childrens should not be dragged.

try this
$('#id').on('mousedown', function(event){
event.preventDefault();
}

For input elements, this answer works for me.
I implemented it on a custom input component in Angular 4, but I think it could be implemented with pure JS.
HTML
<input type="text" [(ngModel)]="value" (ondragenter)="disableEvent($event)"
(dragover)="disableEvent($event)" (ondrop)="disableEvent($event)"/>
Component definition (JS):
export class CustomInputComponent {
//component construction and attribute definitions
disableEvent(event) {
event.preventDefault();
return false;
}
}

using #SyntaxError's answer, https://stackoverflow.com/a/13745199/5134043
I've managed to do this in React; the only way I could figure out was to attach the ondragstart and ondrop methods to a ref, like so:
const panelManagerBody = React.createRef<HTMLDivElement>();
useEffect(() => {
if (panelManagerBody.current) {
panelManagerBody.current.ondragstart = () => false;
panelManagerBody.current.ondrop = () => false;
}
}, [panelManagerBody]);
return (
<div ref={panelManagerBody}>

I will just leave it here. Helped me after I tried everything.
$(document.body).bind("dragover", function(e) {
e.preventDefault();
return false;
});
$(document.body).bind("drop", function(e){
e.preventDefault();
return false;
});

Question is old, but it's never too late to answer.
$(document).ready(function() {
//prevent drag and drop
const yourInput = document.getElementById('inputid');
yourInput.ondrop = e => e.preventDefault();
//prevent paste
const Input = document.getElementById('inputid');
Input.onpaste = e => e.preventDefault();
});

You can simply use draggable="false" on the element itself, else you can put
on-mousedown="preventDefaultDrag"
...
preventDefaultDrag: function(ev) {
ev.preventDefault();
},

This JQuery Worked for me :-
$(document).ready(function() {
$('#con_image').on('mousedown', function(e) {
e.preventDefault();
});
});