Webアプリのスパンでdblclickイベントを処理しています。副作用は、ダブルクリックでページ上のテキストが選択されることです。この選択が行われないようにするにはどうすればよいですか?
function clearSelection() {
if(document.selection && document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
}
すべての非IEブラウザとIE10のスパンにこれらのスタイルを適用することもできます。
span.no_selection {
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
プレーンjavascriptの場合:
element.addEventListener('mousedown', function(e){ e.preventDefault(); }, false);
またはjQueryを使用:
jQuery(element).mousedown(function(e){ e.preventDefault(); });
ダブルクリック後にのみテキストが選択されないようにするには:
MouseEvent#detail
プロパティを使用できます。 mousedownイベントまたはmouseupイベントの場合、1に現在のクリックカウントが加算されます。
document.addEventListener('mousedown', function (event) {
if (event.detail > 1) {
event.preventDefault();
// of course, you still do not know what you prevent here...
// You could also check event.ctrlKey/event.shiftKey/event.altKey
// to not prevent something useful.
}
}, false);
https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail を参照してください
ページ要素内のコンテンツを選択不可にする単純なJavaScript関数:
function makeUnselectable(elem) {
if (typeof(elem) == 'string')
elem = document.getElementById(elem);
if (elem) {
elem.onselectstart = function() { return false; };
elem.style.MozUserSelect = "none";
elem.style.KhtmlUserSelect = "none";
elem.unselectable = "on";
}
}
FWIW、私はuser-select: none
を、親要素のどこかをダブルクリックしたときに何らかの形で選択されたくない子要素の親要素に設定します。そしてそれは動作します!クールなのはcontenteditable="true"
で、テキストの選択などはまだ子要素で機能します!
以下のようなので:
<div style="user-select: none">
<p>haha</p>
<p>haha</p>
<p>haha</p>
<p>haha</p>
</div>
または、mozillaの場合:
document.body.onselectstart = function() { return false; } // Or any html object
IEでは、
document.body.onmousedown = function() { return false; } // valid for any html object as well
古いスレッドですが、オブジェクトにバインドされているすべての偶数を無効にするわけではなく、ページ上のランダムで不要なテキスト選択を防ぐだけなので、よりクリーンだと思うソリューションを思いつきました。それは簡単で、私にとってはうまくいきます。以下に例を示します。クラス「arrow-right」のオブジェクトを何度かクリックすると、テキストが選択されないようにします。
$(".arrow-right").hover(function(){$('body').css({userSelect: "none"});}, function(){$('body').css({userSelect: "auto"});});
HTH!
IE 8 CTRLおよびSHIFTを防ぐには、個々の要素のテキスト選択をクリックします
var obj = document.createElement("DIV");
obj.onselectstart = function(){
return false;
}
ドキュメントでテキストが選択されないようにするには
window.onload = function(){
document.onselectstart = function(){
return false;
}
}
Angular 2 +のソリューションをお探しの方に。
テーブルセルのmousedown
出力を使用できます。
<td *ngFor="..."
(mousedown)="onMouseDown($event)"
(dblclick) ="onDblClick($event)">
...
</td>
detail > 1
の場合は防止します。
public onMouseDown(mouseEvent: MouseEvent) {
// prevent text selection for dbl clicks.
if (mouseEvent.detail > 1) event.preventDefault();
}
public onDblClick(mouseEvent: MouseEvent) {
// todo: do what you really want to do ...
}
dblclick
出力は、期待どおりに機能し続けます。
ダブルクリックだけでなく、何らかの方法でテキストが選択されないようにする場合は、user-select: none
css属性を使用できます。 Chrome 68でテストしましたが、 https://caniuse.com/#search=user-select によると、他の現在の通常のユーザーブラウザーで動作するはずです。
動作上、Chrome 68では、子要素に継承され、要素を囲むテキストを選択した場合でも、要素に含まれるテキストを選択できませんでした。