Daniel Williams Daniel Williams - 4 months ago 13
jQuery Question

Applying jQuery listeners to element's children

I have a button with a jQuery

contextmenu
listener.

In Safari and Chrome, when you right-click the button, the background goes blue for a second and then the text inside the button is selected/highlighted.

How can I prevent this?



jQuery(".class1").contextmenu(function (e) {
return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="class1">Click Me</button>




Answer

If the problem is selecting text inside the button then you can add noselect class to a button, you don't need to use js for that. But maybe I'm wrong.

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}
/*maybe give it a static background .. */
button{
  background:yellow;
}
button:active{
  background:yellow!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="class1 noselect">Click Me</button>