javascript - Disable div click events - Stack Overflow

admin管理员组

文章数量:1303496

I have <div> with width and height properties. I want to put <div> over it, so the click events of the first <div> will not be registered anymore.

For example, I have div and when I click on it something is happening, but when I put second <div> over the first, clicking on the first <div> area will now fire that click events anymore.

<div id="firstDiv" style="width:100px; height:100px">bla bla</div>

How to put another <div> over "firstDiv" so I will not be able to change its elements? Is it possible?

I have <div> with width and height properties. I want to put <div> over it, so the click events of the first <div> will not be registered anymore.

For example, I have div and when I click on it something is happening, but when I put second <div> over the first, clicking on the first <div> area will now fire that click events anymore.

<div id="firstDiv" style="width:100px; height:100px">bla bla</div>

How to put another <div> over "firstDiv" so I will not be able to change its elements? Is it possible?

• javascript
• jquery
• html

Share Improve this question Follow edited Dec 27, 2012 at 14:36 JJJ 33.2k2020 gold badges9494 silver badges103103 bronze badges asked Dec 27, 2012 at 14:27 DimitarDimitar 48411 gold badge66 silver badges1616 bronze badges 2

• 5 It's invalid (not standard) to have multiple html elements with the same id. I suggest you use class instead. – Sang Suantak Commented Dec 27, 2012 at 14:29
• 2 This is a great example of an XY problem. – JJJ Commented Dec 27, 2012 at 14:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

just to disable click event to a div don't place extra div over it just use on() and off() from jQuery

Details : ON ,OFF

Still if you want to place a div over another try using css positioning and z-index

A nice way I've seen it done, and done it myself is to use a modal 'mask' overlay.

The grayed out transparent mask that covers the entire page, except for the element you're interacting with, eg. modal popup window.

You could do a mini version of it just within the popup and push the three non active divs behind it with CSS z-index.

One more way is to use the jQuery BlockUI plugin.

I personally like using something like this

pointer-events:none;

Disable's click events

本文标签： javascriptDisable div click eventsStack Overflow