Skip to content

Have Bootstrap plugin events forward the underlying originalEvent that caused them #15393

@cookch10

Description

@cookch10

It would be useful to know if an expand / collapse event was triggered by a user interaction (e.g. a click) or something else (e.g. programmatically) without having to bind a new click event handler.

Given the following code (which is based off of bootstrap v3.2.0):

/*  Feature request:  Forward the originalEvent to (panel / accordion) collapse API handler(s)
 *
 *  In line 646 of bootstrap 3.2.0, the following click event handler is constructed:
 *
 *  $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {...}
 *
 *  It would be useful to know if expand / collapse was triggered by a user interaction (e.g. a click) or
 *  something else (e.g. programmatically) without having to bind a new click event handler.
 *
 *  This could be accomplished by capturing the e.originalEvent in the event handler described above.
 */

var $collapseElements = $('.collapse'),
    fnCollapseCallback = function (e) {
        // if this event was triggered by something other than a desired user interaction, do nothing.

        var originalEvent = e.originalEvent || {};

        if (originalEvent.type === 'click') {
            // do something useful, like fire analytics tracking
        }
    };

$collapseElements.on({
    'hide.bs.collapse': fnCollapseCallback,
    'shown.bs.collapse': fnCollapseCallback
});


$collapseElements.collapse(); // programmatic collapse (not generated from a user interaction), do not want to track this.

In the example above I have indicated capturing the e.originalEvent object and storing it on the event object supplied to the fnCollapseCallback handler.

It might be the case that there is an existing attribute more suited for storing this information (and possibly also not storing the entire originalEvent object).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions