Trigger mousedown and include e.which in the event

Question

Im using highcharts and jquery. Instead of the normal legend-system to show the name of my series, i have my own ul filled with li containing the data-serie names and information.

I'm simulating desktop folder behaviour in this list with jquery ui .draggable() and a few custom events that listen for user holding ctrl or shift. (used for selecting and deselecting multiple list elements at once)

What I'm also doing is letting the user click on the line in the highcharts graph to select the li element in the series list.

Problem: I want to for example hold control and click on two or more data-series in the graph to highlight those series in the list.

I am able to trigger the li click event by clicking on the series in the graph, but holding ctrl or shift does nothing. So how do I send "e.which" to an event I'm triggering elsewhere?

I have a lot of code, so i'll just post the most relevant stuff. Ask away for clearification.

This is the click event in highcharts that triggers the li click event. I haven't forgotten the mouseup event, i just havent gotten to it yet

click: function (event) {
$(newDisplay).find('.destination li[data-description="' + this.name + '"]').trigger('mousedown', [event])
},'

This is the whole li mousedown and mouseup event

    var targetArea, lastClicked,
        slct = 'ui-selected',
        slctC = '.ui-selected';

    if (!parameterTarget)
    { targetArea = '.lnSeries'; }
    else
    { targetArea = parameterTarget; }

    $(targetArea)
        .off()
        .on('mousedown', 'li', function (e) {
            if (e.ctrlKey || e.metaKey) {
                if ($(this).hasClass(slct)) {
                    $(this).removeClass(slct);
                    lastClicked = null;
                }
                else {
                    $(this).addClass(slct);
                    lastClicked = $(this)
                }

            } else if (e.shiftKey) {
                if ($(slctC).length == 0) {
                    lastClicked = $(this);
                }

                if ($(this).index() > $(lastClicked).index()
                    && $(this).siblings().is(lastClicked)) {

                    $(lastClicked).nextUntil($(e.target).next()).addBack().addClass(slct);
                } else if ($(this).index() < $(lastClicked).index()
                    && $(this).siblings().is(lastClicked)) {

                    $(lastClicked).prevUntil($(e.target).prev()).addBack().addClass(slct);

                } else {
                    lastClicked = $(this)
                    $(this).addClass(slct);
                }

            } else {
                lastClicked = $(e.target);
                if (!($(this).hasClass(slct))) {
                    $(slctC).removeClass(slct);
                    $(this).addClass(slct);
                }
            }

            infoTable();

        })
        .on('mouseup', 'li', function (e) {
            if (($(slctC).length > 1) && !(e.ctrlKey || e.shiftKey || e.metaKey)) {
                $(slctC).removeClass(slct);
                $(this).addClass(slct);
            } else if ($(slctC).length == 1) {

            }

        })

I'm sure this is a problem with my e but I just don't understand how to approach this

Thanks in advance

Answer 1

You should use the data passed by trigger method inside targeted handler. This is the way you could do it, but not sure it will work in your case:

$(targetArea)
    .off()
    .on('mousedown', 'li', function (e, data) {
       e = data || e;
        // all rest of logic there...
    });