Is it possible to trigger Mouseevents by a divcontainer?
I have an div Element with the ID mypointer, wich has an absolute position. I animate this div on a page with jquery. The goal is a presentation where the elements show the same reaktion on the div element like the mousepointer. So I want to simulate mouseover, click and rightclick events.开发者_开发问答 Is that possible? Can someone give me an example which show me how to do that?
Thank you for your answers
Lara
P.S. Example here link text the red square is over an h1 element. Is it possible to execute the h1 mouseover event, when there is a collision of the mypointer and an h1 element?
I'm not quite sure if I get you well, but to 'simulate' events like mouseover
et cetera, you can always use jQuery's .trigger() in a form like:
$('#my_div_id').trigger('mouseover');
You can also call a more 'detailed' version, where you can specify the events arguments
$('#my_div_id').trigger({
type: 'keypress',
which: 13,
ctrlKey: true
});
which infact would simulate a return key while ctrl key
is pressed to 'my_div_id'. If you just need the event handler code to execute, use .triggerHandler().
Maybe i don't understand your idea completely, but i wrote some code.
It works very simple. We bind two events "click mouseover" on #mypointer and also on h1 (or any other selector). When the event fires on #mypointer we check every h1 element to match it's position with position of #mypointer and if match -- trigger the event on matched element.
"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);
});
});
Sorry, parser "eat" checkIntersection function, so full code available on http://www.everfall.com/paste/id.php?263utdc1nmqy
wbr, Roman.
精彩评论