Question

我正在使用onmouseover，它在我的标准浏览器中有效，但似乎无法在 Firefox 中使用。我尝试使用 jQuery 重新创建它，但它仍然无法正常工作。

我怎样才能与 Firefox 兼容？

if (img_default.style.overflow != 'visible') {
    div.onmouseenter = function() {
      mouseOver(event)
    };
} else {
    el.style.display = "none";
}

function mouseOver(event) {
    if (img_default.style.overflow === 'visible') {
        el.style.display = "none";
    } else {
        el.style.display = "inline-block";
        var posX = event.offsetX ? (event.offsetX) : event.pageX - div.offsetLeft;
        var posY = event.offsetY ? (event.offsetY) : event.pageY - div.offsetTop;
        zoom.style.backgroundPosition = (-posX * 1) + "px " + (-posY * 1) + "px";
    }
}

Here是整个JSFiddle。

Answer 1

您的问题很可能是因为您丢失了event个对象。事实上，我有点惊讶它能够在别人身上工作。

而不是这个：

div.onmouseenter = function() {
  mouseOver(event)
};

你需要这个：

div.onmouseenter = function(event) {
  mouseOver(event)
};

（注意添加的event）。或者更好，就是这样：

div.onmouseenter = mouseOver;

因为它已经是一个函数，所以不需要包装它们。或者，更好的是，避免使用onmouseenter并使用addEventListener()：

div.addEventListener('mouseenter', mouseOver);

Answer 2

这将是jQuery方式。

将所有内容转换为jQuery。
为缩放（x和y）添加了scaX和scaY的缩放值。

＆＃13;

/** jQuery plugin for reuse below. */
(function($) {
  $.fn.isOverflowVisible = function() {
    return this.css('overflow') === 'visible';
  };
  $.fn.setBackgroundPosition = function(pos) {
    return this.css({ backgroundPositionX : pos.x, backgroundPositionY : pos.y });
  }
})(jQuery);

var scale = { x: 0.71, y: 1.15 };
var imgsrc = $('#image').attr('src');
var $spot = $('#messages_product_view');
var $image = $('#image');
var $defaultImage = $('.product-image-zoom').first();
var $span = $('<span>', {
  id: 'zoom',
  css: { backgroundImage: 'url(' + imgsrc + ')' }
});
$spot.after($span);

if (!$defaultImage.isOverflowVisible()) {
  $image.on('mouseover', handleMouseOver)
        .on('mousemove', handleMouseOver)
        .on('mouseout', handleMouseOut);
} else $span.hide();

function handleMouseOver(e) {
  if ($defaultImage.isOverflowVisible()) $span.hide(); 
  else {
    $span.show();
    $('#zoom').setBackgroundPosition({
      x : (e.offsetX ? (e.offsetX * scale.x) : e.pageX - $span.offset().left) * -1,
      y : (e.offsetY ? (e.offsetY * scale.y) : e.pageY - $span.offset().top) * -1
    });
  }
}
function handleMouseOut(e) { $span.hide(); }

＆＃13;

#zoom {
  position: absolute;
  float: right;
  top: 10%;
  border: 1px solid #e7e7e7;
  width: 300px;
  height: 300px;
  color: red;
  display: none;
  background-repeat: no-repeat;
  -webkit-transform: scale(1.3);
      -ms-transform: scale(1.3);
       -o-transform: scale(1.3);
          transform: scale(1.3);
  z-index: 1000;
  left: 40%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messages_product_view"></div>
<div class="product-img-box">
  <div class="ProductImageWrapper">
    <p class="product-image product-image-zoom" style="overflow: hidden; z-index: 9;">
      <img id="image" src="https://img-9gag-fun.9cache.com/photo/a47ZwBA_460s.jpg" style="width: 225px; left: 0px; top: 0px; z-index: 0;"> </p>
  </div>
</div>

＆＃13;

Answer 3

我已在此fiddle更新了您的代码，现在它适用于Chrome，Mozilla和IE11（我还没有尝试过任何其他浏览器）。

正如@samanime所说，你引用的是event，这在任何地方都没有定义。因此你必须改变这个：

div.onmouseenter = function() {
  mouseOver(event)
};

到此：

div.onmouseenter = mouseOver;

onMouseover无法在Firefox中运行

3 个答案: