ブラウザの選択を禁止する

ブラウザ上でマウスをドラッグすると内容が選択されてコピーしたりできますが、

ss-copy.png

ドラッグだけでなくダブルクリックでも選択されてしまうので、Webアプリ等の場合はこの挙動が邪魔になる場合があります。

選択をできないようにするには以下の方法があります。


JavaScriptを使う

onselectstartイベントでfalseを返せば選択できなくなります。


document.onselectstart = function() {
  return false;
}

JQueryを使う場合はこんな感じで


$(document).ready(function() {
  $(this).bind("selectstart", function() {
    return false;
  });
});

CSSを使う

最近のブラウザではCSSで選択を禁止することもできます。

* {
  -webkit-user-select: none;  /* Chrome or Safari */
  -moz-user-select: none;     /* FireFox */
  -ms-user-select: none;      /* IE */
  -o-user-select: none;       /* Opera */
  user-select: none;
}