javascript - Is there a way to make an img tag not selectable in a browser? - Stack Overflow

admin管理员组

文章数量:1406942

I have an image in my page and I don't want it to pick up mouse clicks (as in the browsers inherent drag and drop or the drag select where it highlights the image in the browser.)

Is there something I can do to the img or its parent dom element or the page to make the browser not do anything when I click on the image? I need to use the mousedown for something else, but the browser seems to perform my mousedown event as well as do its own dragging or highlighting, and I don't want it to. Any ideas?

I have an image in my page and I don't want it to pick up mouse clicks (as in the browsers inherent drag and drop or the drag select where it highlights the image in the browser.)

Is there something I can do to the img or its parent dom element or the page to make the browser not do anything when I click on the image? I need to use the mousedown for something else, but the browser seems to perform my mousedown event as well as do its own dragging or highlighting, and I don't want it to. Any ideas?

• javascript
• html
• dom

Share Follow edited Jul 25, 2010 at 21:46 Vincent McNabb 34.8k77 gold badges3333 silver badges5454 bronze badges asked Jul 25, 2010 at 21:39 stustu 8,8452020 gold badges8282 silver badges117117 bronze badges 5

• 2 If you're trying to do this to prevent people from copy and pasting an image or saving it, then don't expect it to be very effective on anyone who knows anything about puters. – Lèse majesté Commented Jul 25, 2010 at 21:43
• If you're locking the door to your house, don't expect it to be very effective on anyone who knows anything about burglary... By making things harder, you stop most people from doing something. But after that, it gets more and more difficult to stop it. – Vincent McNabb Commented Jul 25, 2010 at 21:48
• I was a hacker long before they changed the meaning of the word hacker to mean what it means today. I know better than to try and keep people from doing what they want with data on their machine. :-) – stu Commented Jul 25, 2010 at 22:09
• 1 Locking all the doors and windows to your house serves as a good deterrent 99.9% of the time. Placing a locked door in front of an open gazebo is pointless. While very few people are master locksmiths, pretty much most teenagers these day know how to take a screen shot/disable js/left-click and press the context menu button/view source/open their temporary internet folder/install DownloadThemAll/or any one of the million other ways to defeat any kind of web image "DRM" you can throw at them. – Lèse majesté Commented Jul 25, 2010 at 23:09
• plagiarismtoday./2008/02/26/… (BTW - this article also links to some resources that provide click-preventing functionality, if you really want to ignore the advice and do it anyway) – lucideer Commented Jul 25, 2010 at 23:20

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Create a div the same size as the image, and then set the image to be the background of the div.

As recursive said, use a div, and set it's background image to the image you want, e.g.:

<div style="width: 879px; height: 576px; background-image: url(image.png);">

using jquery,

$('img').click(function() {
  return false;
})

Images are draggable by default. To override the browser default behaviour, try:

<img draggable="false"...

Best idea what I get, is to cover <img ... by some transparent <div and bind mousedown action to its :) EDIT: or of course, if u won't play with img, u can use it as a background for your div.

本文标签： javascriptIs there a way to make an img tag not selectable in a browserStack Overflow