Question

我有一个ID为mypointer的div元素，它具有绝对位置。我用jquery在一个页面上为这个div设置动画。目标是一个演示文稿，其中元素在div元素上显示与mousepointer相同的reaktion。所以我想模拟鼠标悬停，点击和右键单击事件。那可能吗？有人能给我一个例子，告诉我该怎么做吗？

感谢您的回答

拉拉

P.S。这里的例子 link text 红色方块在h1元素上方。当mypointer和h1元素发生冲突时，是否可以执行h1 mouseover事件？

Answer 1

我不太确定我是否能帮到你，但是为了'模拟'mouseover之类的事件，你总是可以像以下那样使用jQuery的.trigger()：

$('#my_div_id').trigger('mouseover');

您还可以调用更详细的版本，您可以在其中指定事件参数

$('#my_div_id').trigger({
   type:    'keypress',
   which:   13,
   ctrlKey: true
});

当ctrl key被按下'my_div_id'时，它会模拟返回键。如果您只需要执行事件处理程序代码，请使用。triggerHandler()。

Answer 2

也许我完全不明白你的想法，但我写了一些代码。

它非常简单。我们在#mypointer和h1（或任何其他选择器）上绑定两个事件“click mouseover”。当事件在#mypointer上触发时，我们检查每个h1元素以使其位置与#mypointer的位置相匹配，如果匹配，则触发匹配元素上的事件。


"use strict";
/*global $*/
function getElementCoordinates(el) {
  return {
    left: el.offsetLeft,
    right: el.offsetLeft + el.offsetWidth,
    top: el.offsetTop,
    bottom: el.offsetTop + el.offsetHeight
  };
}

function checkIntersection($el) {
  var pointer = getElementCoordinates($('#mypointer')[0]);
  var element = getElementCoordinates($el[0]);

  if ((pointer.left >= element.left && pointer.left = element.left && pointer.right = element.bottom && pointer.bottom = element.bottom && pointer.top 



$(function () {
  $('#mypointer').live('click mouseover', function (e) {
    //here write selectors you want to check for collision
    $('h1').each(function () {
      if (checkIntersection($(this))) {
        $(this).trigger(e.type);
        return false;
      }
    });
  });
  $('h1').live('click mouseover', function (e) {
    $("#output").html(e.type + ' fired on ' + e.target.nodeName);
  });
});

抱歉，解析器“吃”checkIntersection函数，因此http://www.everfall.com/paste/id.php?263utdc1nmqy上提供完整代码

WBR，罗马。

是否可以通过div容器触发鼠标事件？

2 个答案: