JQuery: Click Class Reaction

Question

$(document).ready(function() {

// ............. Your jQuery Code goes here .............

    //var myArray1 = new Array( "img1", "img2" , "img3",  "img4");
    var numImg = $('#thumbNail img').length; //number of images
    var num = 0;
    var curImg = 0;


    //Prevent Image Dragging
    $("img").bind('contextmenu', function(e) {
        return false;
    }); 



    //Prevent Right Click on Mouse
    $("img").bind("mousedown", function(e){
        return false;
    });



    $(".leftThumbNail").live("click", function(){ 
        alert("HY"); 
    });


});

I am trying to have it react to when ever I click on images inside class "leftThumbnail". This class contains 2 images on the left panel. Whenever I click any of the images from that class, nothing seems to happen.

I also tried:

$(".leftThumbNail").click(function() {

        alert("HEY");

    });

In my "leftThumbNail" class I have the following:

<div class="leftThumbNail">   

<img id = "img1" src="img/thumb/image1.jpg" class = "image1Position" alt="Image 1">

<img id = "img2" src="img/thumb/image2.jpg" class = "image2Position" alt="Image 2" >

</div>

`$("img").bind("mousedown", function(e){` prevents all click events on said elements since a click event is comprised of a mousedown AND a mouseup event. — Kevin B, Oct 17 '13 at 21:28
I am trying to prevent only right click and the question here suggests thats (http://stackoverflow.com/questions/4753695/disabling-right-click-on-images-using-jquery) — user1234440, Oct 17 '13 at 21:29
That's great, but it does much more than just prevent right click. — Kevin B, Oct 17 '13 at 21:29
the only answer that suggests binding a `mousedown` handler says that you need to check `event.which` to see which button was used, so you don't also block the left button. — Barmar, Oct 17 '13 at 21:31
You can't prevent someone from downloading images from your webpage. For the user to view the image, they would have already had to download it (it's in their temporary internet files folder). Just remove the attempts to prevent that and your code might start working, assuming there are no other errors. — Kevin B, Oct 17 '13 at 21:32
@KevinB +1 not only that, if it's on the screen, it can be screen captured. — Matthew Blancarte, Oct 17 '13 at 22:05
You could use flash to make it harder, but again that doesn't stop screen capturing. — Kevin B, Oct 17 '13 at 22:07

PlantTheIdea · Accepted Answer · 2013-10-17T22:03:46.690

Ok try this:

$('img').on({
    contextmenu:function(e) {
        e.preventDefault();
    },
    click:function(e){
        if(e.which === 3){
            e.preventDefault();
        }
    },
    dragstart:function(e){
        e.preventDefault();
    }
}); 

$(".leftThumbNail").on('click', function(){ 
    alert('HY'); 
});

This does the following:

Kills right-click by checking e.which to be specific to right-clicks
updates to .on(), the modern version of what you wanted to do
Combines your handlers for 'img' into a single .on() declaration

To consolidate it even more:

$('img').on({
    contextmenu:function(e) {
        e.preventDefault();
    },
    click:function(e){
        if(e.which === 3){
            e.preventDefault();
        } else if($(this).hasClass('leftThumbNail')){
            alert('HY');
        }
    },
    dragstart:function(e){
        e.preventDefault();
    }
});

No more extra handlers ... all handled in one now!

EDIT Modified to include prevention dragging (performed by using dragstart handler). Also changed return false to the more proper e.preventDefault() to allow for bubbling.

for some reasons, now my images are able to be dragged; so it answered the problem of right clicking and reaction to class clicking but re-introduced the problem of picture dragging — user1234440, Oct 17 '13 at 21:54
@user1234440 added in prevention of `dragstart` events, which should cure dragging as well. — PlantTheIdea, Oct 17 '13 at 22:04

JQuery: Click Class Reaction

1 Answers1