Javascriptに頼らずに、Firefoxで画像をドラッグ不可かつ選択不可にする方法を知っている人はいますか? 些細なことのようですが、ここに問題があります：
Firefox でドラッグして強調表示できます。
これを追加しますが、ドラッグ中に画像をハイライトできます。
これを追加して強調表示の問題を修正しますが、直観に反して、画像は再びドラッグ可能になります。奇妙な、私は知っている！FF 16.0.1 の使用
では、なぜ , を追加-moz-user-select: noneするとどうにかして切り札にして無効にするのか知っている人はいdraggable=falseますか? もちろん、webkit は期待どおりに動作します。これについてインターウェブには何もありません...これについて一緒に光を当てることができれば素晴らしいことです.
編集: これは、UI 要素が不注意にドラッグされるのを防ぎ、使いやすさを改善することに関するものです。コピー防止スキームの不完全な試みではありません。
次の CSS プロパティを画像に設定します。
.selector {
user-drag: none;
-webkit-user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
私は自分のソリューションを共有するのを忘れていました.JSを使わずにこれを行う方法を見つけることができませんでした. @Jeffery A Woodenの提案されたCSSがカバーしないコーナーケースがいくつかあります。
これは、すべての子要素で再利用されるため、各要素に適用する必要はありません。
CSS:
.unselectable {
/* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
/* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
-moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
-webkit-user-select: none;
-ms-user-select: none; /* From IE10 only */
user-select: none; /* Not valid CSS yet, as of July 2012 */
-webkit-user-drag: none; /* Prevents dragging of images/divs etc */
user-drag: none;
}
JS:
var makeUnselectable = function( $target ) {
$target
.addClass( 'unselectable' ) // All these attributes are inheritable
.attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
.attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
.on( 'dragstart', function() { return false; } ); // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS
$target // Apply non-inheritable properties to the child elements
.find( '*' )
.attr( 'draggable', 'false' )
.attr( 'unselectable', 'on' );
};
これは必要以上に複雑でした。
div場合によっては、画像を CSSで背景画像にすると便利なことがよくあります。
<div id='my-image'></div>
次にCSSで：
#my-image {
background-image: url('/img/foo.png');
width: ???px;
height: ???px;
}
ボタンと異なるサイズ変更オプションを使用した実際の例については、このJSFiddleを参照してください。
You could probably just resort to
<img src="..." style="pointer-events: none;">