Menu
An app I am making has tabs that use an HTML5 canvas as a backing (they are rounded like chrome tabs, which can't be done through border radius or conventional HTML). However, when someone double clicks on things around the tabs, it highlights the entire canvas area.
// i've tried:
canvas { outline: none; }
// and
canvas { -moz-user-select: none /* etc */ }
// to no avail.
The only solutions I can find on the web is to use JS and event bind each damn canvas with things like:
canvas.onselectstart = function () { return false; }
Then we have to get into unbinding events, etc. etc. and I have these tabs all over my app.
To humor CBroe:
and the problem:
pbebbl solved it, by calling a user-select: none on the parent element of the canvas.
620
If you do not need to support IE9, then you can indeed use user-select (you'll need prefixes for each of the browsers: -ms-, -moz-, and -webkit-). It's possible the reason that the selection is still appearing is that a higher-level element than you think is selected. Example:
<body>
<div id="wrapper">
<div id="content">
<div id="richUI">
<canvas id="navigationTabs">
If you're doing it to "navigationTabs", try it for "richUI" - or higher.
150
It depends on your set up but you could try pointer-events — it's only supported in the more recent of browsers however:
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
canvas { pointer-events: none; }
Obviously this will cause problems if your expecting to trap any mouse events directly on the canvas layers themselves.
Hmm. Well it really depends on your markup to what different things you could try, if you posted some of that into your answer it would help. Another guess, which would specifically target the issue which is to block the ondblclick event — but that wouldn't prevent selections occuring by other means.
<body ondblclick="return false">
Also with regard to @Katana314's answer, you may need to disable the selection on the element that wraps the canvas element, rather than target the canvas element directly, for example:
<div class="canvas-wrapper">
<canvas />
</div>
And then use:
.canvas-wrapper { -moz-user-select: none; }
That may work.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
