Можно ли вызвать Mouseevents с помощью divcontainer?

Question

У меня есть элемент div с идентификатором mypointer, который имеет абсолютную позицию. Я оживляю этот div на странице с помощью jquery. Целью является презентация, в которой элементы показывают одинаковую реакцию на элемент div, как указатель мыши. Поэтому я хочу смоделировать события мыши, щелчка и щелчка правой кнопкой мыши. Это возможно? Может кто-нибудь дать мне пример, который покажет мне, как это сделать?

Спасибо за ваши ответы

Lara

P.S. Пример здесь текст ссылки красный квадрат над элементом h1. Можно ли выполнить событие наведения мыши h1, когда происходит столкновение mypointer и элемента h1?

Answer 1

Я не совсем уверен, поправлюсь ли я, но для «симуляции» таких событий, как mouseover и так далее, вы всегда можете использовать jQuery's .trigger () в такой форме: *

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

Вы также можете вызвать более «детальную» версию, где вы можете указать аргументы событий

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

, какой факт имитирует клавишу возврата, пока ctrl key нажата к 'my_div_id'. Если вам просто нужен код обработчика событий для выполнения, используйте. triggerHandler () .

Answer 2

Может быть, я не совсем понимаю вашу идею, но я написал некоторый код.

Работает очень просто. Мы связываем два события "click mouseover" на #mypointer, а также на h1 (или любом другом селекторе). Когда событие срабатывает на #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 


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

Извините, парсер "съел" функцию checkIntersection, поэтому полный код доступен на http://www.everfall.com/paste/id.php?263utdc1nmqy

WBR, Roman.