要素の子にjQueryリスナーを適用する

Question

jQuery contextmenuリスナーを持つボタンがあります。

SafariとChromeでは、ボタンを右クリックすると背景が1秒間青くなり、ボタン内のテキストが選択/強調表示されます。

どうすればこの問題を防ぐことができますか？

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 1

問題がボタン内のテキストを選択しているなら、あなたはボタンにnoselectクラスを追加することができ、あなたはそのためのJSを使用する必要はありません。しかし、多分私は間違っています。あなたがMacをご述べたコメントで

.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>

Answer 2

あなたがクリックするCTRL +のLMBを使用しているので、青の背景/枠があるかもしれません。

CTRLを押したときにボタンにフォーカスを削除します：

jQuery(".class1").contextmenu(function(e) { 
 
    return false; 
 
}).keydown(function(e) { 
 
    if (e.keyCode == 17) { //CTRL 
 
    $(this).blur(); 
 
    } 
 
});

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

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