Solved

Which element is selected by a left or right click?

Posted on 2016-07-26
4
29 Views
Last Modified: 2016-08-04
I have several folder icons that are created with the template:

<div id='folderTemplate' class="template openclosed_folder_icon subfolder" style="position:absolute; top:'30'; left:'100';">
           <img class="folder_icon" src="images/folder_closed.png"  alt="closed folder"  />
           <div class="folder_label" >name</div> 
           <img class='folder_redX' src='images/redX.png' alt='redX' title='Delete this gallery' />
    </div>  

Open in new window


The folders look like this:
folders
If I left-click most folders, the e.target that comes into jQuery is the first <img> element, on line 2 above.  And if I right-click these folders with Chrome Debugging turned on, to inspect them, the element selected is this first <img> element.   But one of the folders gives me the outer div, at line 1,  when I left click it or right-click it.  Does anyone have an idea what's going on?  What controls which element is actually selected by a left or right click?

Thanks
0
Comment
Question by:steva
  • 2
  • 2
4 Comments
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41730767
Can we see a link please or can you at least post your html and css
0
 

Accepted Solution

by:
steva earned 0 total points
ID: 41731580
I solved this but it wasn't what I thought. The problem was that the template div for the folder to the left extends too far right and overlaps the folder on the right:
overlap.jpg
So when I thought I was clicking on the images folder I was actually clicking on the template div of the Gallery folder, which blocked the mouse click from reaching the images folder. The click wasn't bringing up the template div of the images folder. It was bringing up the template div of the Gallery folder that overlayed the images folder. Fix was to make the width of the template div just enough to hold the folder name so there won't be any more overlapping of folders.
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41731604
That is why a link is helpful - with the Inspect Element window you can hover over the element and see its extent and bounds - makes it easier to solve issues such as this.

Having said that though - hard coding a width is not a great solution - you should try to make your code autofit its available space - that way you won't run into this sort of problem.
0
 

Author Closing Comment

by:steva
ID: 41742155
It was the only correct answer.
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question