Search code examples
javascriptjqueryqtip2

JQMIGRATE: jQuery.fn.mousedown() event shorthand is deprecated and more deprecations


i'm ugrading jQuery to version 3.6.0 in a project using jQuery qtip 3.0.3 (released on 11 May 2016). Also i'm using jQuery migrate 3.3.2, which is returning some deprecated functions of qtip, as qtip is not maintained anymore i want to change the mentioned methods by myself.

This is the qtip library i'm using: https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.js

The first deprecation message looks like:

JQMIGRATE: jQuery.fn.mousedown() event shorthand is deprecated
migrateWarn @ jquery_migrate_3_3_2.js:100
jQuery.fn.<computed> @ jquery_migrate_3_3_2.js:682
S.fn.init @ jquery_3_6_0_min_1.js:2
jQuery.fn.init @ jquery_migrate_3_3_2.js:158
S @ jquery_3_6_0_min_1.js:2
init @ jquery_qtip_3_0_3.js:2724
OVERLAY @ jquery_qtip_3_0_3.js:2833
(anonymous) @ jquery_qtip_3_0_3.js:2835
(anonymous) @ jquery_qtip_3_0_3.js:25
(anonymous) @ jquery_qtip_3_0_3.js:28
(anonymous) @ jquery_qtip_3_0_3.js:3487
jquery_migrate_3_3_2.js:102 console.trace

The second deprecation message looks like:

JQMIGRATE: jQuery.fn.delegate() is deprecated
migrateWarn @ jquery_migrate_3_3_2.js:100
delegate @ jquery_migrate_3_3_2.js:713
delegate @ jquery_qtip_3_0_3.js:1400
(anonymous) @ jquery_qtip_3_0_3.js:1672
e @ jquery_3_6_0_min_1.js:2
t @ jquery_3_6_0_min_1.js:2
setTimeout (async)
(anonymous) @ jquery_3_6_0_min_1.js:2
c @ jquery_3_6_0_min_1.js:2
fireWith @ jquery_3_6_0_min_1.js:2
fire @ jquery_3_6_0_min_1.js:2
c @ jquery_3_6_0_min_1.js:2
fireWith @ jquery_3_6_0_min_1.js:2
ready @ jquery_3_6_0_min_1.js:2
B @ jquery_3_6_0_min_1.js:2
jquery_migrate_3_3_2.js:102 console.trace

The third deprecation message looks like:

JQMIGRATE: jQuery.fn.bind() is deprecated
migrateWarn @ jquery_migrate_3_3_2.js:100
bind @ jquery_migrate_3_3_2.js:705
init @ jquery_qtip_3_0_3.js:2732
OVERLAY @ jquery_qtip_3_0_3.js:2833
(anonymous) @ jquery_qtip_3_0_3.js:2835
(anonymous) @ jquery_qtip_3_0_3.js:25
(anonymous) @ jquery_qtip_3_0_3.js:28
(anonymous) @ jquery_qtip_3_0_3.js:3487
jquery_migrate_3_3_2.js:102 console.trace
migrateWarn @ jquery_migrate_3_3_2.js:102
bind @ jquery_migrate_3_3_2.js:705
init @ jquery_qtip_3_0_3.js:2732
OVERLAY @ jquery_qtip_3_0_3.js:2833
(anonymous) @ jquery_qtip_3_0_3.js:2835
(anonymous) @ jquery_qtip_3_0_3.js:25
(anonymous) @ jquery_qtip_3_0_3.js:28
(anonymous) @ jquery_qtip_3_0_3.js:3487

The messages are regarding e.g.

   elem = self.elem = $('<div />', {          
      id: 'qtip-overlay',             
      html: '<div></div>',            
      mousedown: function() { return FALSE; }         
   })
  .hide();
function delegate(selector, events, method) {
  $(document.body).delegate(selector,
      (events.split ? events : events.join('.'+NAMESPACE + ' ')) + '.'+NAMESPACE,
      function() {
          var api = QTIP.api[ $.attr(this, ATTR_ID) ];
          api && !api.disabled && method.apply(api, arguments);
      }
  );
}

and

$(document.body).bind('focusin'+MODALSELECTOR, stealFocus);
$(document).bind('keydown'+MODALSELECTOR, function(event) {
elem.bind('click'+MODALSELECTOR, function(event) {

Now i wonder how to replace them correctly with the on event. With bind i suppose, i can easily replace it with .on, but how to process with mousedown and delegate?

Any help would be appreciated :)

Related: jQuery .on('click') vs. .click() and .delegate('click')


Solution

  • Could solve it with the answer from freedomn-m :)

    Solution:

    elem = self.elem = $('<div />', {
            id: 'qtip-overlay',
            html: '<div></div>',
            on: ('mousedown', function() { return FALSE; })
            })
            .hide();
    
    
    function delegate(events, selector, method) {
        $(document.body).on(events.split ? events : events.join('.'+NAMESPACE + ' ')) + '.'+NAMESPACE,
            (selector,
            function() {
                var api = QTIP.api[ $.attr(this, ATTR_ID) ];
                api && !api.disabled && method.apply(api, arguments);
            }
        );
    }
    
    $(document.body).on('focusin'+MODALSELECTOR, stealFocus);