Disable click event on all controls using javascript

Question

I want to use pure javascript (due to application architechture) to disable click event on html page.

I tried

document.body.addEventListener("click", function (evt) { evt.preventDefault(); });

but it still opens my select.

I used select just as an example, I want to do it for every control.

Here is Fiddle

Update Can't use pointer-events:none; because I am using it inside WPF application and sadly it uses frustrating browser known as IE.

score 27 · Answer 1 · answered Oct 20 '16 at 07:19

27

You can easily achieve this by CSS

<select style="pointer-events:none;"> 
   <option>a</option>
   <option>b</option> 
<select>

answered Oct 20 '16 at 07:19

Rishabh

1,205
1
11
20

I have to use IE which doesn't support it. Thanks for answer. +1 because it is helpful in other scenarios – Imad Oct 20 '16 at 07:24
@Imad, please check the updated answer. – Sravan Oct 20 '16 at 07:39

Sravan · Answer 2 · 2016-10-20T08:04:28.193

Add simple css, pointer-events: none, if you give it to body element, evety click gets disabled.

<html>
<body  style="pointer-events: none">
<select> 
  <option>a</option>
  <option>b</option> 
</select>
 </body>
  </html>

Please run the code snippet

 <select style="pointer-events: none"> 
  <option>a</option>
  <option>b</option> 
</select>

Here is the fiddle

EDIT FOR IE:

document.addEventListener("click",handler,true);

function handler(e){
    e.stopPropagation();
    e.preventDefault();
}

function cancelDropDown(ev) {
  ev.preventDefault();
}

var showMenu = document.getElementsByClassName("selectElement");

// ...

for ( var i = 0; i < showMenu.length; ++i ) {
    showMenu[i].addEventListener("mousedown", cancelDropDown, false);
}

<select class="selectElement"> 
  <option>a</option>
  <option>b</option> 
</select>
<select class="selectElement"> 
  <option>c</option>
  <option>d</option> 
</select>
<select class="selectElement"> 
  <option>e</option>
  <option>f</option> 
</select>
<a onclick="alert('a')">asd</a>

Fiddle 2

Oh, sorry but I forgot to mention it should work in IE as WPF browser using IE only. +1 for the answer thogh. — Imad, Oct 20 '16 at 07:21
problem with ID is I will have to know ID of every element. As I mentioned in question, I have to do it for all elements. — Imad, Oct 20 '16 at 07:46
The click event listener somehow doesn't work only for select, what you can do is take the same class fot all the select tags, and perform the `getelementsbyclassName` on it. — Sravan, Oct 20 '16 at 07:57

score 0 · Answer 3 · edited May 23 '17 at 12:00

Neither the onSelect() nor onClick() events are supported by the tag. The former refers to selecting text (i.e. by clicking + dragging across a text field) so can only be used with the and tags. The onClick() event can be used with tags - however, you probably are looking for functionality where it would be best to use the onChange() event, not onClick().

LINK: How to use onClick() or onSelect() on option tag in a JSP page?

I think you much try pointer-events: none with style attribute

You can try more answer for this :) How to completely DISABLE any MOUSE CLICK

I think you much insert 1 overlay element and bring it to front select element :)

score 0 · Answer 4 · answered Oct 20 '16 at 07:26

0

<select style="pointer-events: none" id="select" onchange="handleSelect()"> 
  <option value="01">a</option>
  <option>b</option> 
  </select>

and use the following javascript

function handleSelect() {
    if (this.value == '01') {
      document.getElementById('select').disabled = true;
     } else {
     document.getElementById('select').disabled = false;
            }
                        }

answered Oct 20 '16 at 07:26

Muhammad Usman

10,039
22
39

I don't even want to show that option list. complete disable. – Imad Oct 20 '16 at 07:31

Disable click event on all controls using javascript

4 Answers4

Linked

Related