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. — user400654
– user400654, Commented Oct 17, 2013 at 21:28
That's great, but it does much more than just prevent right click. — user400654
– user400654, Commented Oct 17, 2013 at 21:29
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. — user400654
– user400654, Commented Oct 17, 2013 at 21:32

PlantTheIdea · Accepted Answer · 2013-10-17 22:03:46Z

2

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.

edited Oct 17, 2013 at 22:03

answered Oct 17, 2013 at 21:32

PlantTheIdea

16.4k5 gold badges37 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1234440 Over a year ago

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

PlantTheIdea Over a year ago

@user1234440 added in prevention of dragstart events, which should cure dragging as well.

Collectives™ on Stack Overflow

JQuery: Click Class Reaction

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related