Develop Reference

Clicking and holding "through" elements

My page has two overlapping elements: a body that displays a DWG file, and a canvas that's only displayed when the user selects a specific option and covers the entire body.
When the canvas is hidden away, the user can drag the file by clicking, holding and dragging, but when the canvas is placed over it, the option is unavailable.
I need a way to click into the canvas and drag the underlying body. So far, I've added a mousedown function that hides the div and a mouseup function that brings it back, and both are functioning as intended. However, I'm yet to find a way to "bleed" this click through to the body to make it movable as mousedown still "sees" the click into the canvas. Displaying the canvas, or moving it while the body is being moved, is not required.
I've tried using the "FireEvent" method described this question with both "click" and "mousedown" events to no avail.

If I've understood the question right, you can use the pointer-events: none CSS property to click through an element.
See this Codepen to see pointer-events: none in action: https://codepen.io/trustedtomato/pen/bGdVvwX

Detect hover in overlaying element while allowing all pointer actions

I am building an audio player in a SPA and have a main player widget that shows the currently playing track along with controls at the bottom of the page. The desired UI is to hide all controls but the play/pause button until the user hovers near the play/pause button. At this point the extra information, seek bar, volume controls etc. will be animated onto the screen.
Excuse my shoddy drawing
I should add that the controls are positioned fixed to the bottom of the screen.
Initially, I tried adding an extra fixed positioned div on top of everything (high z-index) and using that to trigger the hover event. Obviously, this doesn't allow for clicking the buttons below it so I tried pointer-events: none on the element but then no hover event is registered.
I then tried putting the hover region underneath the control elements and adding the hover trigger to both the hover region and the controls. This causes strange behavior when moving the cursor between the hover region and any controls (i.e. to click pause/play).
My next thought is to scrap the hover region HTML element and use a pure JS solution. I could register a mousemove event to the document body and detect when the cursor is within the hover region, triggering control animations. However, I am worried this might cause performance issues as seems a bit heavy.
I hope someone has some input/improvements on the things I have tried or comes up with something I haven't thought of!
BTW: I am using angular2 for the animation if that sparks some bright ideas to use that.
Update 1
Here's a jsFiddle showing the first two attempts. Change the z-index of hover-region to see the effect of it being on top of the play button or below.

I've created a working version for you at http://jsfiddle.net/6wk69fvo/1/. You already did what I was going to suggest, which is to use onmouseenter and onmouseleave.
But rather than just checking the hover area, you also need to check the toolbar area, and then just OR the two values together.
Also note that I put the play / pause button as a child of the hover area. If you don't want to do that, you'd need to create a third check for mouseenter or mouseleave for that div.

You can alter the control's opacity make it visible/invisible. Here is a simple example done in pure html/js to avoid the overhead of setting up an ng2 app, yet, I'm sure you can quickly adapt it to your code.

How to prevent jQuery UI draggable to increase width of the page and drag to parent HTML from iFrame

I noticed when using jQuery UI draggable and dragging the object to the right side of the screen, that it resizes my whole body.
You can try it on this page: jQuery UI Draggable
You can drag the "drag me around box" further and further to the right. How can I prevent this? I dont want to use containment, because it should continue dragging from inside the iframe to its parent with the option iframeFix: true.
Thank you
Here you have my problem: I made an image

Literally just had this problem with a ton of divs on a background.
I added a touchmove listener to the background and set it to preventDefault() and return false;
This stopped the parent resizing when my panels were dragged out of the edge of the screen.
Probably a bit late, but maybe useful for future reference.
handleContentScroll:function(e) {
e.preventDefault();
return false;
}

how to cancel the drag and drop selection

Try to click in any empty area and drop, this will cause a blue background selection for the page elements like text and images,
To see this behavior clearly, click ctrl+A now.
I have a black theme in a website and some controls requires drag and drop, many visitors drag empty areas by mistake and drop which will cause the unsuitable default elements selection, is there any way to prevent this selection?.

How to disable text selection highlighting using CSS?
This website has a container div.. use your developer toolkit and assign the css rules that I gave you in the post above. You will not be able to select anything.

An image cropper: How to prevent the default drag n' drop action?

I am developing an image cropper and would like to ask you the following question: In order to prevent the default drag n' drop action when you press the left button on an image and keeping it pressed try to move the mouse, wouldn't it be cross-browser if to just use the picture as a background to a div box?
Just like so:
<div id="theDiv" style="background:url(pic.png) no-repeat;"></div>
How do you think? Is it acceptable? Not too ugly? Or should be done with JS?

I would do the same, there is no real other way (as far as I know of) of doing what you want to do crossbrowser.

Are you using a framework? Isn't there a reliable "dragstart" implementation in each of them that can simply be made return false? Correct me if I'm wrong.

You can set your own mouse events which will be more logical way. You will not even need to write code on per-browser basis AFAIK.
This event handlers can be used to set crop frame also.
But your approach is simpler, if you haven't plans on extend this much .

wouldn't it be cross-browser if to just use the picture as a background to a div box?
Yes, but you'd still be starting a drag; if you moved the pointer over into part of the page with text in, you'd be selecting the text, which you probably wouldn't want.
I'd stick with the x.ondragstart=x.onmousedown= function() { return false; };.

I might use draggable="false" or ondrag="return false" but your method works just as well.

You may take a look at this for example, which is a simple and fast image cropper written with pure JavaScript. It uses mousedown to detect drag start and mouseup for drag end. During dragging, it listens document.onmousemove event.