Ngăn chặn hình ảnh có thể kéo hoặc có thể lựa chọn mà không cần sử dụng JS

Có ai biết một cách để làm cho một hình ảnh không thể kéo và không thể lựa chọn - cùng một lúc - trong Firefox, mà không cần dùng đến Javascript? Có vẻ tầm thường, nhưng đây là vấn đề:

1) Có thể được kéo và tô sáng trong Firefox:

<img src="...">

2) Vì vậy, chúng tôi thêm điều này, nhưng hình ảnh vẫn có thể được làm nổi bật trong khi kéo:

<img src="..." draggable="false">

3) Vì vậy, chúng tôi thêm điều này, để khắc phục vấn đề nổi bật, nhưng sau đó ngược lại, hình ảnh trở nên có thể kéo được một lần nữa. Thật lạ, tôi biết! Sử dụng FF 16.0.1

<img src="..." draggable="false" style="-moz-user-select: none;">

Vì vậy, có ai biết tại sao thêm "-moz-user-select: none", bằng cách nào đó sẽ thổi phồng và vô hiệu hóa "draggable = false" không? Tất nhiên, webkit hoạt động như mong đợi. Không có gì ngoài Interwebs về điều này ... Sẽ thật tuyệt nếu chúng ta có thể cùng nhau chiếu sáng thứ này.

Cảm ơn!!

Chỉnh sửa: Đây là về việc giữ cho các thành phần UI không bị kéo vô tình và cải thiện khả năng sử dụng - không phải là một nỗ lực khập khiễng trong sơ đồ bảo vệ bản sao :-)

Đặt các thuộc tính CSS sau cho hình ảnh:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

Tôi đã quên chia sẻ giải pháp của mình, tôi không thể tìm ra cách để làm điều này mà không sử dụng JS. Có một số trường hợp góc mà @Jeffery Một CSS được đề xuất của Gỗ sẽ không bao gồm.

Đây là những gì tôi áp dụng cho tất cả các thùng chứa UI của mình, không cần phải áp dụng cho từng phần tử vì nó sử dụng cho tất cả các phần tử con.

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' ); 
};

Đây là cách phức tạp hơn mức cần thiết.

Bạn có thể sử dụng thuộc pointer-eventstính trong CSS của mình và đặt nó bằng 'none'

img {
    pointer-events: none;
}

Đã chỉnh sửa

điều này sẽ chặn (click) sự kiện. Vì vậy, giải pháp tốt hơn sẽ là

<img draggable="false" (dragstart)="false;" class="unselectable">

.unselectable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

Tùy thuộc vào tình huống, thường hữu ích để làm cho hình ảnh trở thành hình nền của divCSS.

<div id='my-image'></div>

Sau đó, trong CSS:

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

Xem JSFiddle này để biết ví dụ trực tiếp với một nút và tùy chọn kích cỡ khác nhau.

Bạn có thể chỉ cần dùng đến

<img src="..." style="pointer-events: none;">

Một giải pháp chung đặc biệt dành cho trình duyệt Windows Edge (như -ms-user-select: none; quy tắc CSS không hoạt động):

window.ondragstart = function() {return false}

Lưu ý: Điều này có thể giúp bạn tiết kiệm được việc phải thêm draggable="false"vào mỗi imgthẻ khi bạn vẫn cần sự kiện nhấp (tức là bạn không thể sử dụng pointer-events: none), nhưng không muốn hình ảnh biểu tượng kéo xuất hiện.

Bạn có thể đặt hình ảnh làm hình nền. Vì nó nằm trong a divvà không thể divxóa được, nên hình ảnh sẽ không thể xóa được:

<div style="background-image: url("image.jpg");">
</div>

Tôi đã tạo một phần tử div có cùng kích thước với hình ảnh và được đặt ở trên cùng của hình ảnh . Sau đó, các sự kiện chuột không đi đến yếu tố hình ảnh.