Geek Answers Handbook

How to pass javascript events from one element to another?

Scene Setting:

I have 2 layers one on top of the other. The bottom layer contains links (simple images). The top layer contains an extended tooltip, similar to hovering for the bottom layer. These tooltips can be large (they can easily overlap other links and almost always overlap the link they click on).

My question is:

I would like my mouseover events to appear at the lower level, and then on the mouse to display a tooltip in the upper layer. Thus, when you move from the bottom link, the tooltip in the top layer disappears, and the tooltip for the new link can be displayed.

How to take events from the top layer and pass them below the layer? So the top layer is transparent.

HTML example:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css" media="screen"><!-- .tile { width: 100px; height: 100px; position: absolute; } .tile:hover, over:hover {border: 1px solid black;} .over { width: 100px; height: 100px; position: absolute; display:none} .stack, #sandwich { width: 400px; height: 400px; position: absolute; } #tile1 {top: 50px; left: 50px;} #tile2 {top: 75px; left: 10px;} #tile3 {top: 150px; left: 310px;} #tile4 {top: 250px; left: 250px;} #tile5 {top: 150px; left: 150px;} #over1 {top: 55px; left: 55px;} #over2 {top: 80px; left: 15px;} #over3 {top: 155px; left: 315px;} #over4 {top: 255px; left: 255px;} #over5 {top: 155px; left: 155px;} --></style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.tile').click(function(){ $('#log').html(this.id + " clicked"); return false; }) $('div#top').click(function(){ $('#log').html('Top clicked'); return false; }) }); </script> </head> <body> <div id="sandwich"> <div class="stack" id="bottom"> <div class="tile" id="tile1">1</div> <div class="tile" id="tile2">2</div> <div class="tile" id="tile3">3</div> <div class="tile" id="tile4">4</div> <div class="tile" id="tile5">5</div> </div> <div class="stack" id="top"> <div class="over" id="over1">Tooltip for 1</div> <div class="over" id="over2">Tooltip for 2</div> <div class="over" id="over3">Tooltip for 3</div> <div class="over" id="over4">Tooltip for 4</div> <div class="over" id="over5">Tooltip for 5</div> </div> </div> <div id="log"> </div> </body> </html>

In the javascript example, I checked that the events worked as usual, and only the top part was pressed. But I basically want the over elements to be transparent.

+8
javascript jquery javascript-events
source share
3 answers

I hope I understand the OP, but you can replicate the event on any selector after the original event happened: http://jsfiddle.net/Cr9Kt/1/ p>

In a linked sample, I accept an event at the upper level and create a similar event that fires at the lower level. You can do this further with any click of each element (as opposed to the top and bottom as a whole).

This is a borrowed idea from another question: Triggering JavaScript click () events at specific coordinates

+4
source share

I'm not quite sure that I understand what you are asking. It sounds like a tool to me. Here is an example of how to make a tooltip using jQuery, CSS, and HTML.

http://jsbin.com/ilali3/13/edit

Hope you get started. If you add some details or change this jsbin with more details, we can go over a bit.

I updated the example a bit to include storing tooltip information in the html element itself using jQuery. It is a little cleaner.

Bean

0
source share

It may seem overly complicated and inelegant ... it fakes your functionality .. but it works;)

 $(document).ready(function(){ var tileData = new Array(); // get coordinate data for each tile $('div.tile').each(function(){ var tileInfo = {}; tileInfo.id = this.id; tileInfo.text = $(this).text(); tileInfo.width = $(this).outerWidth(); tileInfo.height = $(this).outerHeight(); tileInfo.position = $(this).position(); tileInfo.coords = {}; tileInfo.coords.top = tileInfo.position.top; tileInfo.coords.right = tileInfo.position.left + tileInfo.width; tileInfo.coords.bottom = tileInfo.position.top + tileInfo.height; tileInfo.coords.left = tileInfo.position.left; tileData.push(tileInfo); }); $('div.tile').click(function(){ $('#log').html(this.id + " clicked"); return false; }) $('div#top').click(function(event){ $('#log').html('Top clicked'); // try to find tile under your mouse click for(i=0; i<tileData.length;i++){ if( event.pageX >= tileData[i].coords.left && event.pageX <= tileData[i].coords.right && event.pageY >= tileData[i].coords.top && event.pageY <= tileData[i].coords.bottom ) { // found a tile! trigger its click event handler $('#' + tileData[i].id).click(); } } return false; }); });

Try it here: http://jsfiddle.net/neopreneur/vzq4z/1/

0
source share

Source: https://habr.com/ru/post/649806/

More articles:


All Articles