简体   繁体   中英

Click event on document.body not working as it should on IE8

I'm working on some tweaks for a webpage, I'm using MVC and jquery.

Basically I have some help icons on my page, when the user clicks on the icon, a bubble appears with a help description.

I have this code in my javascript for that page:

AddHelpIconMouseEvents: function(element, msg, divForm) {
   $(element).live('click', function(event) {
      if (event.type === "click") MyClassHelper.showHelpIconBubble(msg, divForm, event);
   });
   $(document.body).click(function() { $(divForm).hide('fast'); });            
}

As you can see I'm using the document.body.click event to capture any click outside the help bubble, and hide the bubble.

Now consider this situation, I click on the help icon and the bubble is displayed, if I click anywhere else on the page, the bubble disappears as expected, but the problem I have is, if instead of clicking on a blank space on the page I click on a link, the link displays another section of the page, hides the section that contained the help icon but the help bubble does not disappear, it remains displayed.

This doesn't happen on Firefox, in which I can click on a link or on an empty space and the bubble disappear.

I think this may be related to the way in which IE handle events, I think I read something about it, so I wonder if anyone knows how can I fix this, I think I can put some code on the links and validate if the bubble is visible, hide it, but I don't like the idea, I think it is not a good solution, I wonder if there is another better way to handle this.

Thanks,

You can make a function which checks for the help bundle to check in DOM if it already exists. If so remove it from DOM. You have to call this function on every other link.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM