I am trying to show a warning modal to the user to state that the button is not clickable. The button I used is not clickable due to pointer-events: none on class disable.

Even if the button is not clickable I want to show a warning if the user clicks on that button.

How I can get the click action and show a warning? Can anyone help?

.disable {
  pointer-events: none
}

<button type="button" class="btn disable">Button</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You could use a wrapper and bind the click event on it.

document.querySelector('div').onclick = alert.bind(null, 'hey')

.disable {
  pointer-events: none
}

<div><button type="button" class="btn disable">Button</button></div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Obviously use a different way than pointer events

const but = document.getElementById("but")
but.addEventListener("mousedown",function(e) {
  e.preventDefault()
  this.textContent = "Nope!"
})
but.addEventListener("mouseup",function(e) {
  e.preventDefault()
  this.textContent = "Button"
})

.disable {
  background-color: light-grey;
  opacity:.5
}

<button type="button" id="but" class="btn disable">Button</button>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

jQuery

$("#but")
  .on("mousedown", function(e) {
    e.preventDefault()
    this.textContent = "Nope!"
  })
  .on("mouseup", function(e) {
    e.preventDefault()
    this.textContent = "Button"
  })

.disable {
  background-color: light-grey;
  opacity: .5
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="but" class="btn disable">Button</button>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>