Is there a way to change event parameters in jQuery?

Question

I want to be able to change the parameters that are being passed into the selectable's start event, so I can basically allow my user to use the selectable jQuery UI effect without having to hold down the CTRL key.

JS

$(function() {
$( "#selectable" ).bind("mousedown", function(event, ui) {
    var result = $( "#select-result" ).empty();
    event.metaKey = event.ctrlKey = true;
});
$( "#selectable" ).selectable();
});

I have a fiddle with what I'm trying to accomplish here:

http://jsfiddle.net/josephbulger/ZfevM/

The problem I'm having, is that when i set the event's parameters in the start method, the stop method is not seeing the changes I'm making.

Is there a way to accomplish what I'm trying to do?

Answer 1

You can't set the properties here no...because it's a different event object in the stop method. You can set some variables at a higher scope (like this), but none that will persist on the event object. It's not that it's "clearing" them really, it's just a brand spanking new object.

---

To make the selectable behave as if Ctrl is held down, bind to the mousedown event it uses ahead of time and set the .metaKey property on that event to true, like this:

$("#selectable").bind("mousedown", function(e) {
    e.metaKey = true;
}).selectable();

You can test it out here, remember to find before calling .selectable(), since event handlers are executed in the order bound.

Answer 2

I've updated the code. Have a look at this URL.

http://jsfiddle.net/phoenix_suresh/7f6j5/

Meanwhile, I've added ID attribute to

items so that you can have more control on it.

Answer 3

After finding this answer I noticed that you can use the originalEvent property on the event object returned in the selectable start event handler to set the ctrlKey property to true.

Like so:

$("#selectable").selectable({
    start: function (event, ui) {
        event.originalEvent.ctrlKey = true;
    }
});

Working fiddle