Solved

Which element is selected by a left or right click?

Posted on 2016-07-26
4
31 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 56

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 56

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
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 an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

740 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