javascript - JQuery:点击类 react

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


});

当我点击“leftThumbnail”类中的图像时，我试图让它使用react。该类在左侧面板上包含 2 个图像。每当我单击该类中的任何图像时，似乎什么都没有发生。

我也尝试过:

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

        alert("HEY");

    });

在我的“leftThumbNail”类(class)中，我有以下内容:

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

Answer 1

好的，试试这个:

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

这会执行以下操作:

• 通过检查 e.which 特定于右键单击来终止右键单击
• 更新了 .on()，这是您想要执行的操作的现代版本
• 将 'img' 的处理程序合并到单个 .on() 声明中

进一步巩固它:

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

不再需要额外的处理程序...现在所有处理程序都集中处理!

编辑 修改为包括预防拖动(通过使用 dragstart 处理程序执行)。还将 return false 更改为更合适的 e.preventDefault() 以允许冒泡。