1

SharePoint presents multi-select fields as below image.

enter image description here

We have attached custom click events to "Add >" and "< Remove" buttons which perform some operations. But there is a double click event attached on the select (for both left and right) which moves elements to the other select. We need to disable that double click event so that user only uses "Add >" and "< Remove" buttons.

I am unable to find a way to disable it. I have tried using jQuery's unbind, off, but nothing seems to work. How can we remove the double click event from these select fields?

  • Inspect those buttons then, insert a script editor to add jQuery to disable those buttons. – little_big_thoughts Dec 28 '17 at 6:21
  • 1
    Microsoft adds an anonymous function for the dblclick event, so there is no way to remove it. The only simple and quick solution is to replace the element with a clone as describe here: stackoverflow.com/a/9251864/1134119 – AymKdn Dec 29 '17 at 8:25
  • @AymKdn: Thanks. Was able to create a work around. Posted it as answer. – Naveen Jan 3 '18 at 8:17
1

There is no (easy) way to remove an anonymous event handler from element. But what you can do is to add your own event handler before SharePoint attaches its event handler. Now in your event handler you can stop the propagation so that SharePoint's event handler doesn't get executed.

Create JavaScript file and add your OnPostRender method. Inside the method identify the control for which you need to stop ondblclick event. Once identified, attach your own ondblclick event and call e.stopImmediatePropagation() to stop calling the SharePoint's ondblclick event.

Add the JavaScript file to the New/Edit form webpart of your list/document library.

(function() {
    var myContext = {};
    myContext.OnPostRender = myPostRender; // Create your post ender method
    myContext.Templates = {};
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(myContext);
})();

function myOnPostRender(ctx) {
    // Identify multilist control
    if (ctx.ListSchema.Field[0].FieldType == "LookupMulti" && ctx.ListSchema.Field[0].AllowMultipleValues == true) { 
        // Attach your double click event on left select
        $('#' + ctx.ListSchema.Field[0].Name + "_" + ctx.ListSchema.Field[0].Id + "_SelectCandidate").on('dblclick', function(e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation(); // Stop event propogation to SharePoint's double click event
        });
        // Attach your double click event on right select
        $('#' + ctx.ListSchema.Field[0].Name + "_" + ctx.ListSchema.Field[0].Id + "_SelectResult").on('dblclick', function(e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation(); // Stop event propogation to SharePoint's double click event
        });
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.