Quicktab stopping click event bubbling up to document by returning false in click handler

Created on 8 July 2014, over 10 years ago
Updated 11 December 2024, 11 days ago

I don't know i am observing this right or not? Recently i need a functionality where user click on a link to slidedown a div as a dropdown list of links when user click outside of that div that div should be slideup and become hidden. To achieve this functionality i have to bind the click handler to document which will hide that div when user click anywhere outside of that link. Bound a click handler to that link which will slidedown that div and show and will prevent click event propagation up to document to prevent that div being hidden. Something like that:

      var dropbtn = $(".parent").find("a.link");
      $(document).click(function(){
        if(dropbtn.hasClass("open")) {
          dropbtn.removeClass("open");
          $(".child-div").slideUp("fast");
        }
      });
      dropbtn.click(function(e) {
          $(this).addClass("open");
          $("child-div").slideDown("fast");
          e.stopPropagation();
      });
	

This code was working fine and was showing "chidl-div" as drop down when user click on that link and hiding that "child-div" when user click outside of that link. But that hiding functionality was not working when user click on any of the quick tab enabled on that page. Because quicktab was preventing click event bubbling upto document and was prevent that click handler bound to document.

In quicktab.js i found that in custom click handler quicktab was returning false which was preventing click event bubbling. Rather then returning false it should use event.preventDefault();

code from quicktab.js

  Drupal.quicktabs.clickHandler = function(event) {
  var tab = event.data.tab;
  var element = this;
  // Set clicked tab to active.
  $(this).parents('li').siblings().removeClass('active');
  $(this).parents('li').addClass('active');

  // Hide all tabpages.
  tab.container.children().addClass('quicktabs-hide');

  if (!tab.tabpage.hasClass("quicktabs-tabpage")) {
    tab = new Drupal.quicktabs.tab(element);
  }

  tab.tabpage.removeClass('quicktabs-hide');
  return false;
}

rather then

	return false;

it should be

	event.preventDefault();
🐛 Bug report
Status

Closed: outdated

Version

3.6

Component

Code

Created by

🇮🇳India msankhala Bikaner, Rajasthan

Live updates comments and jobs are added and updated live.
  • jQuery

    Affects the version, handling, or usage of the jQuery javascript library.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇺🇸United States smustgrave

    With D7 EOL approaching in a month I'm starting to triage the D7 side of quicktabs queue. This doesn't appear to have any code so believe this may not make it, sorry! Thanks though!

    If still an issue or needed for 4.0.x (latest branch) feel free to reopen

Production build 0.71.5 2024