Develop Reference

Chrome: Inspect elements that appear only when dragging

I often want to view the styles of an element that appears only when dragging or when the mouse is clicked (mousedown event). How can I view the element's style using Google Chrome's developer tools?

Open the developer tools.
Go to "Sources":
Expand "Event Listener Breakpoints" on the right:
Add a listener for keydown events on the keyboard section:
Now start dragging the thing you want, and when it's time press any key on your keyboard and you'll be able to inspect the dragable element.

You can simply press F8 while dragging (and developer tools is open)

In case anyone encountered this question in the future, I have another solution for this. This solution is kinda same with the most upvoted answer, but it doesn't require any keydown, just simply drag:
Open chrome devtools
Click on the Sources tab
Go to Event Listeners Breakpoints down there
Om the event list, click Drag / drop, then tick dragover
After that, whenever you start to drag an element, the browser window will pause for debugging, then you can inspect the element's CSS styles freely.
Note: I tested this on Chrome version 80, but I think it works in older version though.
Edited:
Just now I figured out dragover breakpoints doesn't work in certain condition, e.g., if you want to inspect styles after the dragged item reached another element. For that situation, you may try different listeners as specify in Drag / drop, such as drop.

dragMethod() {
setTimeout( () => {
debugger;
}, 500)
}
This will suspend the drag action so you can proceed to inspect as normal.

From the DevTools Go to the lowest element that will wrap your draggable item
Right click this element and chose "Store as global variable" it'll be referred to from the console as temp1
Write in the console this command - let myInterval = setInterval(() => console.log(temp1.cloneNode(true)), 1000)
At this stage you can see the element details in the console whem you drag it.
When you don't need to inspect it any more run from the console - clearInterval(myInterval).
Instead of section 2 you can run the follow command and select your draggable element with the appropriate query selector - let myInterval = setInterval(() => console.log(document.querySelector(/* your query goes here */)?.cloneNode(true)), 1000)

Put a breakpoint in the code - inside of the mousedown event callback.
This will freeze the app when you begin dragging, and then you can tab over the the Element section of the inspector to use it like you normally would, only now it's frozen at the beginning of the drag.
EDIT: You should put the breakpoint on a line below where the new elements you want to inspect are created, so the elements are on the DOM by the time you freeze.
// Raw event
someElement.addEventListener('mousedown', function(ev) {
// Put a breakpoint on any of the lines in here
}, false);
// jQuery for prudence
$(someSelector).on('mousedown', function(ev) {
// Put a breakpoint on any of the lines here
});

One way of doing it is to open the elements panel then right click while dragging.
This opens the contextual menu and "pauses" the mouse move/hover effect.
Then after right clicking, go back to the elements panel and search for the element using the find feature.
This can also be used to inspect hover effects (it's just faster than other methods)
This can be tested here for example
https://jqueryui.com/draggable/#visual-feedback

In addition to #Davids answer, it might be worth mentioning, that you need to add a eventlistener somewhere in your code as well or simply put it in the console before
Example:
document.onclick=function(){};

How to detect a MouseUp event outside the window?

I am looking for jQuery solution to detect mouseup outside the window. That is, after the mouse has been downed inside the window, dragged outside while still down, and then released outside, is when the event should fire.
I tried document.mouseup = function() {}, it didn't help. I tried to follow the example here, but couldn't properly understand it (I even left a comment asking for help, but no help yet..:( )

I have a website that uses this event and it works as you described:
$(window).on('mouseup', function(){
//your code here
});
Note: only tested in jQuery 1.8.3, but it should work in 1.9
jsFiddle confirms. Works in jQuery 1.9.1 and 2 beta: http://jsfiddle.net/udRNx/1/
In case you didn't know, this piece of code must be placed in either $(document).ready(fn) or $(window).onload(fn).

incorrect behavior 'onselectstart' in Chrome

There is draggable element which must move with a 'move' cursor. The cursor will become like at selecting when I move the element. I tried to use .onselectstart = function(e) { return false } on 'mousedown' and .onselectstart = null on 'mouseup'. It works good. But it stops working after any select on the page. I observe it in Google Chrome and Maxthon only.
So, take a look http://jsfiddle.net/JqMgE/1/
Sometimes needs select a few times to call this bug.

I solved the problem by using event.preventDefault() onmousedown and onmousemove.
http://jsfiddle.net/JqMgE/2
There is no need to use .onselectstart.

jQuery - click-event is called twice on iPad

I have a problem with my web application which is designed for iPad.
I use jQuery and jQuery UI for dragging elements on the screen. Because on iPad, the element can not be dragged by default, I added this library:
http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
Including it, I can drag and drop elements on iPad, but also a problem occurs. I have on the draggable element also a div are with an image, which should be clickable.
So I integrate these lines:
$(document).ready(function() {
$(".note").draggable();
$('.closebutton').click(function() {
alert("test");
});
});
​
The problem is, including the drag-library, the alert message test pops up twice or the screen is frozen.
I created a full working demo here:
http://jsbin.com/oliwo/2/
On normal desktop browsers, like Firefox 4 Beta and Safari, it works, only one test message appears by clicking with the mouse on the x - delete image. On iPad, I get the message twice or the screen froze.
Does anyone can help me? Thank you a lot in advance & Best Regards.

This is not really a response, as i don't known why you have it twice. But you can try a workaround if you're sure your click event is the only click event behavior that should be attached to this button; Make an unbind() just before you're bind, this will remove any previous click binding (so if this is run several times, you'll get only one event):
$('.closebutton').unbind().click(function() { ...
or better:
$('.closebutton').unbind('click').click(function() { ...

I've found that events get fired twice when showing an alert box on a click. I've managed to overcome this problem by using a setTimeout to show the alert box...
$("#myButton").unbind("click").click(function () {
// Have to use a setTimeout else on iPhone the alert may appear twice in certain scenarios
setTimeout(function () { alert('The message'); }, 300);
return false; // Return false to prevent href being followed
});

I do not know why, but if I do not use alert messages, it will work. I create new elements and then it is only called once, on iPad and Desktop Safari.

I'm seeing this issue only on iPad, perhaps some version of webkit related. The unbind worked for me, and I also read this only exists if jquery code is in the body html tag, if its in head it is not an issue.

just simply avoid the propagation of the click
$("tr").live('click',function() {
...
$( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } );
});

Mobile Safari Event Issue

I have designed a website with a menu that is initially invisible. When the user clicks on a button, the menu becomes visible. There are two ways for the user to hide the now visible menu:
Click the button that caused the menu to become visible
Click anywhere on the web page that isn't the menu
The way I have coded the second option is to tie an onclick event to the window element, and have it compare where the user clicked to the menu's position to determine if the menu should be hidden. This works great in Firefox and Safari, but it fails in Mobile Safari.
I noticed that the window onclick event only fires when I click on another element with an onclick event already assigned. If I click on an element with no event(s) assigned, the window's onclick event never fires. If I click on the button which displays the menu, it fires along with the event tied to the button.
Is it possible to assign events to the window element in Mobile Safari?

I'v been encountering this same problem. Here is what worked for me. (Note: I am working within a Modernizr and jQuery context)
First, I add a custom Modernizr class using Modernizr's addTest Plugin API to test for iOS, which will add the class appleios or no-appleios accordingly.
Because in my research the body seems to fire events on it's own agenda, I am taking a little precaution by wrapping all the document's content with an element in an iOS context. Then I add an event handler to this element.
$(".appleios body").wrapInner('<div id="appleios-helper" />');
$("#appleios-helper").bind("mouseup", function(){return;});
What was suggested earlier in this thread is using void(0). I did some quick testing, and found that void(0) as the event just wasn't causing touches on the body to be recognized. When I plugged in my own "empty" function in the form of function(){return;} things started working.
This all hinges on the fact that no events are fired in Mobile Safari unless the element explicitly has events to fire (Safari Web Content Guide.) By inserting this empty event on the wrapper, things will bubble up to the body.
If you're doing strait JavaScript with none of these libraries, the same effect could be achieved in the HTML markup
<html>
...
<body>
<div id="appleios-helper" onmouseup="function(){return;}">
...
</div>
</body>
</html>
This worked for me to hide tooltips when touching anywhere on the document's body. Your mileage may vary.

Simply adding the dummy onclick handler to the html body works for me:
<body onclick="void(0)">
Note that I am using usual live event handlers as shown below:
function liveHandler( event ) {
var target = event.target; ...}
window.addEventListener(evtype, liveHandler, true);
// evtype such as 'mousedown' or 'click'
// we use the capturing mode here (third parameter true)

This is an old question, but I struggled with the same thing today.
I found that using touchstart event works.
I solved it like this:
var isTouchDevice = 'ontouchstart' in document.documentElement;
if (isTouchDevice) {
// Do touch related stuff
$(document).on('touchstart', function (event) {
// Do stuff
});
} else {
// Do non-touch related stuff
$(document).on('click', function () {
// Do stuff
});
}

You could just add onclick="void(0);" to some <div> that covers the whole page so that no matter what, you are always clicking on an element that has an onclick event. Not a great solution, though.
I'd prefer not having the onclick event be tied to the window. Why don't you create a container <div> that has that event on it. Then handle it just like you currently are.

You can also:
$('body').css('cursor', 'pointer');
No idea what those "engineers" at Apple are doing. LOL.
This has problems though. You wouldn't want to do this on every touch device. Only touch devices that don't also have a pointing device (Laptops with Touch Screens, for example).
Source: http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
The conclusion of the article is this:
So I don’t understand why all this is the case, but it most certainly is the case. If you’re having bubbling problems, just add an empty-function event handler anywhere between the body and the element, and you’re set to go. But it shouldn’t be necessary.