Skip to content

vuejs listing for events on disabled elements

How can I listen for events on a disabled element? I have an input box that I have disabled but that I want to enable if the user double clicks it. I know this is possible using a label and switching the label off using CSS. I want to know if there is a way to do this without a label – is there some way to disable the input and still handle events for it? or is there a way to make the input unfocusable unless double-clicked?


You can prevent the default action of the input with a timeout. If a user clicks before the ms has elapsed, you run the desired code:

new Vue({
  el: '#app',
  data: {
    checked: false,
    timeoutId: null, // You do not need to have this defined, vue will initialize it for you, but here for clarity
  methods: {
    dblClick(event) {
      // Simple click
      if (!this.timeoutId) {
        this.timeoutId = setTimeout(() => {
          this.timeoutId = null;
        }, 300);
        return // Do not run below code if it is a single click
      // double click
      this.timeoutId = null;
#app {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 width: 100%;
 height: 100vh;
h1 {
  font-size: 1.5em;
  margin-bottom: 5px;
i {
  font-size: .75em;
  margin: 0;
  color: #969696;
input {
  transform: scale(2);
  margin: 20px 0;
<script src=""></script>
<div id="app">
  <h1>Checkbox is {{ checked ? 'checked' : 'not checked' }}</h1>
  <i>Double-click to change</i>
  <input v-model="checked" type="checkbox" @click="dblClick">