Question

这是我的jsfiddle的链接

在第147行上的小提琴中，当我尝试做console.log(this)时，它给窗口对象而不是在ID为{{1}的行166 $('#loadImage').loadImage()的函数调用中传递的元素}。它导致在整个窗口上而不是在元素上绑定click事件处理程序。这意味着当我在页面上单击任何位置时都会触发事件。所以我的问题是为什么我不能在第147行访问元素而是窗口对象。任何帮助将不胜感激。

Answer 1

将处理程序绑定到DOM事件时，将在window上下文中调用该处理程序。这就是DOM事件处理的方式。如果要访问单击的对象，只需查看事件对象，然后在其中查找target属性。那就是被点击的DOM元素。因此，在这种情况下，您的点击处理程序将如下所示：

$(this).on('click',function(event){                    
   $('#image_modal').css('display','block');
   // event.preventDefault();
   event.stopPropagation();

   console.log($(event.target));

   //$('#image_modal').css('height','100vh');
   //return false;  
});

您的控制台日志应指向被单击的元素。

更新

插件构造函数（第141行）中的this是window对象的原因是因为您在第130行中使用了箭头功能来定义插件。而是使用声明性函数定义：

       // Adding function                       // Removed => 
$.fn.loadImage = function (options = null, callback = null) { 

    if (options !== null) {
      // loadImage.settings = $.extend(loadImage.settings, options);
      loadImage.updateSettings(options);
    }

    loadImage.init();

       ||  // this points to element calling loadImage
       ||
       \/
    $(this).on('click', function(event) {
      $('#image_modal').css('display', 'block');
      // event.preventDefault();
      event.stopPropagation();
      console.log(this);
      //$('#image_modal').css('height','100vh');
      //return false;   
    });

    $('#modal_close').on('click', function(event) {
      $('#image_modal').css('display', 'none');
      //$('#image_modal').css('height','0px');
      return false;
    });
  };

创建一个简单的jQuery插件时遇到麻烦

1 个答案:

更新