How to enable contextmenu click on disabled select box

Question

i am trying to call a function on right click on the select box which has disabled attribute. but i am unable to call a function.if i remove disabled attribute, then the right click is working.

function hello() {
  alert('clicked');
  window.event.returnValue = false;
}

#testSelect {
  width: 100px;
  height: 20px;
}

<select id="testSelect" oncontextmenu="hello()" disabled="true">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

How can i do this?

Mouse clicks on `disabled` elements will not be fired. This is why your Handler does not work. — messerbill, Mar 21 '18 at 13:08

Zenoo · Accepted Answer · 2018-03-21T13:22:27.023

2

You won't be able to trigger any mouse event on a disabled select.

BUT I added a dirty trick that uses a div to simulate the effect :

Put a div after your select, position it on top of your select and give it a display: none.

Add the CSS rule .yourSelect:disabled + .yourDiv{display: block;} to put the new div on top of your select.

You will then be able to catch mouse events on that div.

Demo:

$(document).on('contextmenu','.dirty-hack', e => {
  alert('clicked');
  return false;
});

body {
  margin: 0;
}

#testSelect {
  width: 100px;
  height: 20px;
}

div.dirty-hack {
  position: absolute;
  top: 0;
  display: none;
  width: 100px;
  height: 20px;
}

#testSelect:disabled+.dirty-hack {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="testSelect" disabled="true">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
<div class="dirty-hack"></div>

edited Mar 21 '18 at 13:22

answered Mar 21 '18 at 13:14

Zenoo

12,670
4
45
69

this is not a solution for the OT (have a look at my duplicate link which has a much better workaround for this problem) – messerbill Mar 21 '18 at 13:17
**1)** Why is it not a solution for OP ? **2)** My take on the issue joins your link, there's almost no difference between them. – Zenoo Mar 21 '18 at 13:19
Ofc it is due to your event will be fired if you click anywhere in the document and the question was about "how to handle click events on disabled elements" The green marked answer in the dupe firstly removes the `disabled` attribute – messerbill Mar 21 '18 at 13:21
1

Forgot the context on my `contextmenu` handler, my bad. – Zenoo Mar 21 '18 at 13:22
This will not realy work, since the dirty-hack will not stick to the select input, but to the top of the page. – Bellian Mar 21 '18 at 13:26
@Bellian I specified in my answer that OP has to put the added div on top of his select. Here I used the shortest way to do it in a snippet, only to illustrate. – Zenoo Mar 21 '18 at 13:28
@Zenoo I see. My bad. But I prefer elegant solutions without objects floating in the void. – Bellian Mar 21 '18 at 13:35

Bellian · Answer 2 · 2018-03-21T13:23:30.590

You can just disable interaction with this select if disabled and create a dummy element which will catch the click:

let element = document.getElementById('dummy');
element.addEventListener('contextmenu', (e)=>{
  alert('clicked');
  e.preventDefault();
  e.stopPropagation();
});

#testSelect {
  width: 100px;
  height: 20px;
}

#testSelect:disabled {
  pointer-events: none;
}

<span id="dummy">
  <select id="testSelect" disabled="true">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
  </select>
</span>

Luan Wincardt · Answer 3 · 2018-03-21T13:39:23.177

-1

Wrap it in a tag and call it by using .click() function from jquery. Click function

edited Mar 21 '18 at 13:39

answered Mar 21 '18 at 13:12

Luan Wincardt

13
7

could you also provide a working example? I don't think that this is possible... – messerbill Mar 21 '18 at 13:16
this is not working: https://jsfiddle.net/eoqawa1q/4/ – messerbill Mar 21 '18 at 13:24
wrap it in a span with a id, then select the input to make the changes. – Luan Wincardt Mar 21 '18 at 13:34
Note: You'll have to get the span click. – Luan Wincardt Mar 21 '18 at 13:35
so update your answer...and this will add a click handler to the `` and **not** to a `disabled` input field. But the way you formulated your answer is simply not working – messerbill Mar 21 '18 at 13:36

How to enable contextmenu click on disabled select box

3 Answers3