การป้องกันไม่ให้ภาพลากหรือเลือกได้โดยไม่ต้องใช้ JS

มีใครรู้วิธีทำให้รูปภาพไม่สามารถลากและเลือกไม่ได้พร้อมกันใน Firefox โดยไม่ต้องใช้ Javascript ดูเหมือนจะไม่สำคัญ แต่นี่คือปัญหา:

1) สามารถลากและเน้นใน Firefox:

<img src="...">

2) เราจึงเพิ่มสิ่งนี้ แต่ยังสามารถไฮไลต์ภาพได้ขณะลาก:

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

3) เราจึงเพิ่มสิ่งนี้เพื่อแก้ไขปัญหาการไฮไลต์ แต่ในทางตรงกันข้ามภาพจะลากได้อีกครั้ง แปลกฉันรู้! ใช้ FF 16.0.1

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

มีใครรู้บ้างว่าทำไมการเพิ่ม "-moz-user-select: none" จะทำให้ดีกว่าและปิดใช้งาน "draggable = false" หรือไม่? แน่นอนว่า webkit ทำงานได้ตามที่คาดไว้ ไม่มีอะไรอยู่ใน Interwebs เกี่ยวกับเรื่องนี้ ... มันจะดีมากถ้าเราสามารถส่องแสงในเรื่องนี้ด้วยกัน

ขอบคุณ !!

แก้ไข: นี่เป็นเรื่องเกี่ยวกับการป้องกันไม่ให้องค์ประกอบ UI ถูกลากโดยไม่ได้ตั้งใจและปรับปรุงการใช้งาน - ไม่ใช่ความพยายามที่อ่อนแอในรูปแบบการป้องกันการคัดลอก :-)

ตั้งค่าคุณสมบัติ CSS ต่อไปนี้ให้กับรูปภาพ:

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

ฉันลืมที่จะแบ่งปันวิธีแก้ปัญหาของฉันฉันไม่สามารถหาวิธีทำได้โดยไม่ใช้ JS มีบางกรณีที่ CSS แนะนำของ @Jeffery A Wooden นั้นไม่ครอบคลุม

นี่คือสิ่งที่ฉันนำไปใช้กับคอนเทนเนอร์ UI ทั้งหมดของฉันไม่จำเป็นต้องใช้กับแต่ละองค์ประกอบเนื่องจากจะใช้องค์ประกอบย่อยทั้งหมด

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

นี่เป็นวิธีที่ซับซ้อนกว่าที่ควรจะเป็น

คุณสามารถใช้pointer-eventsคุณสมบัติใน CSS ของคุณและตั้งค่าให้เท่ากับ 'ไม่มี'

img {
    pointer-events: none;
}

แก้ไข

สิ่งนี้จะบล็อก (คลิก) เหตุการณ์ ทางออกที่ดีกว่าก็คือ

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

ขึ้นอยู่กับสถานการณ์การทำให้รูปภาพเป็นภาพพื้นหลังของdivCSS ด้วย CSS มักจะเป็นประโยชน์

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

จากนั้นใน CSS:

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

ดูJSFiddleนี้สำหรับตัวอย่างสดที่มีปุ่มและตัวเลือกการปรับขนาดอื่น

คุณอาจจะแค่หันไปหา

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

โซลูชันทั่วไปโดยเฉพาะสำหรับเบราว์เซอร์ Windows Edge (เนื่องจาก -ms-user-select: none กฎ CSS ไม่ทำงาน):

window.ondragstart = function() {return false}

หมายเหตุ: สิ่งนี้สามารถช่วยให้คุณไม่ต้องเพิ่มลงdraggable="false"ในทุกimgแท็กเมื่อคุณยังต้องการเหตุการณ์การคลิก (เช่นคุณไม่สามารถใช้pointer-events: none) แต่ไม่ต้องการให้รูปภาพไอคอนลากปรากฏขึ้น

คุณสามารถตั้งค่าภาพเป็นภาพพื้นหลังได้ เนื่องจากอยู่ใน a divและไม่divสามารถแลกเปลี่ยนได้ภาพจะไม่สามารถแลกเปลี่ยนได้:

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

ฉันสร้างdivองค์ประกอบที่มีขนาดเดียวกับภาพและอยู่ในตำแหน่งด้านบนของภาพ จากนั้นเหตุการณ์ของเมาส์จะไม่ไปที่องค์ประกอบรูปภาพ