How to stop image selecting

Question

I'm running a click event when I clicked the ball. But sometime click doesn't work, I'm selecting image accidently and it stops click event..

I tried to remove selectable property with below css properties, but doesn't work

pointer-events: none; // it stops click event, selecting continue
user-select: none;  // it doesn't change anything

element and css

#ball {
    height: 100px;
    position: absolute;
    bottom: 10px;
    left: 50%;
}

<img id="ball" src="images/ball.png"/>

How can I make it image not selectable ?

You might consider show more of the code for context. – Difster Nov 16 '18 at 17:12 — Difster, Nov 16 '18 at 17:12
You could try to make image a background image. – estinamir Nov 16 '18 at 17:13 — estinamir, Nov 16 '18 at 17:13

score 2 · Accepted Answer · answered Nov 16 '18 at 17:21

You can do this using CSS only.

The following code should help you to achieve the desired results.

#ball {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;
  height: 100px;
  position: absolute;
  bottom: 10px;
  left: 50%;
}

<img id="ball" src="images/ball.png">

Working in the above snippet.

How to stop image selecting

1 Answers1