javascript - Disable html5 canvas click events - Stack Overflow

admin管理员组

文章数量:1341411

I have a canvas element, and in the canvas if you click a button it opens a div modal. The modal then has some buttons on it, and if you click on one of the buttons and it is also above a button in the canvas, the canvas button also gets clicked.

I would like to disable the canvas, but I can't seem to do so. I have a tried applying css styles to the canvas like so:

pointer-events: none

But the canvas still accepts the clicks. Is there any way for me to disable the canvas so that I can click on the modal without it affecting the canvas?

The canvas contains a game, and the game isn't always the same, so I don't have access to the canvas' code to disable the buttons in the canvas.

I have a canvas element, and in the canvas if you click a button it opens a div modal. The modal then has some buttons on it, and if you click on one of the buttons and it is also above a button in the canvas, the canvas button also gets clicked.

I would like to disable the canvas, but I can't seem to do so. I have a tried applying css styles to the canvas like so:

pointer-events: none

But the canvas still accepts the clicks. Is there any way for me to disable the canvas so that I can click on the modal without it affecting the canvas?

The canvas contains a game, and the game isn't always the same, so I don't have access to the canvas' code to disable the buttons in the canvas.

• javascript
• css
• html
• canvas

Share Follow asked Apr 4, 2017 at 16:47 Get Off My LawnGet Off My Lawn 36.4k4646 gold badges198198 silver badges375375 bronze badges 4

• instead of disabling the click event on the campus, simply stop the click event on the button from bubbling – DrunkWolf Commented Apr 4, 2017 at 16:48
• I'm actually having a hard time recreating the scenario where a html button is above a canvas and the click events bubbling to the canvas element.. are you sure there's not another element catching the events? Or that maybe the button is positioned UNDER the canvas? (in which case you should just give it a position and higher z-index) – DrunkWolf Commented Apr 4, 2017 at 16:59
• I'll toss another scenario out there.. do the buttons have the same ID? does the modals button get the click event? – rlemon Commented Apr 4, 2017 at 17:02
• The canvas that I am testing with is built with construct 2, so I am not sure what that is doing in the background. – Get Off My Lawn Commented Apr 4, 2017 at 18:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

First, you set it up like this:

<div class='your-canvas-wrapper'>
<canvas>
...
</canvas>
</div>

If you want to disable on page load.

.your-canvas-wrapper {
    cursor: not-allowed;
    pointer-events: none;
}

If you want to disable after page load, you can do this...

$(".your-canvas-wrapper").css("cursor", "not-allowed");
$(".your-canvas-wrapper").css("pointer-events", "none");

You can simply make a handler such as

const c = document.querySelector("#myCanvas")
c.addEventListener('click', e => {
    if (c.classList.contains('disabled')) {return}
    // Do not perform default action, stop bubbling the event
    e.preventDefault();e.stopPropagation()

    // Mark event as invalid for older browsers
    return false
})

Edit: More Conclusive solution

.canvas-wrapper {position:relative}
.canvas-wrapper:after {content:'';position:absolute;z-index:999;top:0;left:0;width:100%;height:100%;cursor: not-allowed;    pointer-events: none}

<div class='canvas-wrapper'>
  <canvas></canvas>
</div>

This creates a faux blocking element atop your canvas element, this way it gathers all click events before they can even hit the canvas (since the canvas is under this element)

Event Propagation - https://developer.mozilla/en-US/docs/Web/API/Event/stopPropagation

In the event handler for the button click, stop the propagation of the event.

本文标签： javascriptDisable html5 canvas click eventsStack Overflow