Question

我正在尝试模块化以下javascript，但我有一个问题是传递事件目标。 open函数位于$（'。myImg'）。on（'click'，function（event）{...}内。我无法让它发挥作用。

任何输入都将不胜感激。

var Modal = function () {
    var modal = document.getElementById('myModal'),
        modalcontent = document.getElementById('modal-img-content'),
        close_btn = document.getElementsByClassName("close")[0],
        img = document.getElementsByClassName('.myImg'),
        modalImg = document.getElementById("img01"),
        visible = false;

        function getScrollBarWidth () {
            var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
                widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
            $outer.remove();
            return 100 - widthWithScroll;
        }

        function open(event){            
            visible = true;
            modal.style.display = "block";
            document.getElementsByTagName("BODY")[0].style.overflow = "hidden";    
            modal.style.overflow = "auto";
            var newSrc = this.src;
            var caption = this.alt;
            modalImg.setAttribute('src', newSrc);
        }
        return {
            getScrollBarWidth : getScrollBarWidth,
            open : open
        }
}();

$('.myImg').on('click', function(event) {
    event.stopPropagation();
    Modal.open(event);
});

Answer 1

您传递事件但不在处理程序中使用它。

有正确的代码：

function open(event){            
        visible = true;
        modal.style.display = "block";
        document.getElementsByTagName("BODY")[0].style.overflow = "hidden";    
        modal.style.overflow = "auto";
        var newSrc = event.target.getAttribute('src');
        var caption = event.target.getAttribute('alt');
        modalImg.setAttribute('src', newSrc);
    }

Answer 2

由于我已经对该解决方案进行了评论，因此我发布了一个已清理的版本。

您需要使用您传递的事件。

你想要

var newSrc = event.target.src; 
var caption = event.target.alt;

这是您在代码中唯一需要DOM的地方

var Modal = function() {
  var $modal = $('#myModal'),
    $modalcontent = $('#modal-img-content'),
    $close_btn = $(".close"),
    $img = $('.myImg'),
    $modalImg = $("#img01"),
    visible = false;

  function getScrollBarWidth() {
    var $outer = $('<div>').css({
        visibility: 'hidden',
        width: 100,
        overflow: 'scroll'
      }).appendTo('body'),
      widthWithScroll = $('<div>').css({
        width: '100%'
      }).appendTo($outer).outerWidth();
    $outer.remove(); // WHY?
    return 100 - widthWithScroll;
  }

  function open(event) {
    visible = true;
    $modal.show();
    $("body").css({'overflow':'hidden'});
    $modal..css({'overflow':'auto'});
    var newSrc = event.target.src;
    var caption = event.target.alt;
    $modalImg.attr('src', newSrc);
  }
  return {
    getScrollBarWidth: getScrollBarWidth,
    open: open
  }
}();

$('.myImg').on('click', function(event) {
  event.stopPropagation();
  Modal.open(event);
});

如何将事件目标传递给函数

2 个答案: