javascript - addeventlistener ड्रॉप त्रुटि "अनक्यूट टाइप एरर: अवैध अभिवादन"




callback drag-and-drop (2)

मैं फ़ंक्शन द्वारा नया ऑब्जेक्ट बनाऊँ, और मैं उपयोग करने के लिए sortable करने योग्य विधि बनाता हूं, लेकिन कॉलबैक फ़ंक्शन पर एक त्रुटि है

;"use strict";
(function(){
    function libJS(){};

    libJS.prototype = {
        loopElement : function(element, options, callback){
            var libObj = this;
            var goesCallback = function(element, options, callback){
                if (!!callback && libObj.isFunction(callback)) callback(element, options);
            };

            if (libObj.isElement(element)) goesCallback(element, options, callback);
            else if (libObj.isString(element) && /^(\.|\#)[\w\d\-_]+$/g.test(element)){
                if (/^\./g.test(element)){
                    element = document.getElementsByClassName(element.replace('.', ''));
                    var length = element.length || 0, i;
                    for(i = 0; i < length; i++) goesCallback(element[i], options, callback);
                }else{
                    element = document.getElementById(element.replace('#', ''));
                    if (!!element) goesCallback(element, options, callback);
                }
            }
        },

        isElement : function(element){
            // code check
            var f=(typeof HTMLElement === 'object' || false);
                f=(f && element instanceof HTMLElement);
                f=(f||(typeof element === 'object' && element.nodeType===1 && typeof element.nodeName === 'string'));
		    return f;
        },

        isString : function(str){
            // code check
            return true;
        },

        isObject : function(obj){
            // code check
            return true;
        },

        isFunction : function(func){
            // code check
            return true;
        },

        token : function(length){
            // create token
            return 'random_string';
        },

        sortable : function(options){
            if ('draggable' in document.createElement('span')){
                var libObj = this;
                if (libObj.isObject(options)){
                    libObj.loopElement(options.element, options, function(element, options){
                        element.style.position = 'relative';
                        var childNodes = element.childNodes,
                            length = childNodes.length || 0, x;
                        for (x = 0; x < length; x++){
                            var item = childNodes[x];
                            if (item.nodeName !== '#text'){
                                item.id = 'libJS-' + libObj.token(12);
                                item.draggable = true;
                                item.style.cursor = 'pointer';
                                item.style.transition = 'all 0.5s ease';
                                item.addEventListener('dragstart', function(event){
                                    event.preventDefault();
                                    // some code
                                });
                            }
                        }
                        element.addEventListener('dragover', function(event){
                            event.preventDefault();
                        });
                        element.addEventListener('drop', function(event){
                            event.preventDefault();
                        });
                        console.log(element.__proto__.ondrop); // View Error
                    });
                }
            }else throw 'ERROR: libJS.sortable(): this browser not support drag and drop event!';
        }
    };
    window.libJs = new libJS();
})();

libJs.sortable({
   element : '.sorter'
});
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Test</title>
        <style type="text/css">
            *{
                box-sizing: border-box;
            }
            .sorter{
                border: 1px solid green;
                padding: 10px;
            }
            .sorter:after{
                display: block;
                content: '';
                clear: both;
            }
            .sorterItem{
                display: inline-block;
                float: left;
                width: 70px;
                height: 70px;
                margin-right: 10px;
                margin-bottom: 10px;
            }
            .sorterItem img{
                display: block;
                max-width: 100%;
                max-height: 100%;
                min-width:100px;
                min-height:100px;
            }
        </style>
    </head>
    <body>
        <div class="sorter">
            <div class="sorterItem">
                <img src="/data/upload/noimage.jpg" />
            </div>
            <div class="sorterItem">
                <img src="/data/upload/noimage.jpg" />
            </div>
            <div class="sorterItem">
                <img src="/data/upload/noimage.jpg" />
            </div>
            <div class="sorterItem">
                <img src="/data/upload/noimage.jpg" />
            </div>
            <div class="sorterItem">
                <img src="/data/upload/noimage.jpg" />
            </div>
            <div class="sorterItem">
                <img src="/data/upload/noimage.jpg" />
            </div>
        </div>
    </body>
</html>

और ये एक त्रुटि है: Uncaught TypeError: Illegal invocation एरर Uncaught TypeError: Illegal invocation

जब मैं ड्रैग करता हूं तो goesCallback फ़ंक्शन जाता है। यह ब्राउज़र को मार सकता है

इसलिए, sortable विधि में मुझे कुछ पंक्ति में त्रुटि देखने के लिए console.log(element.__proto__.ondrop) I

इस त्रुटि को ठीक कैसे करें?

सबको धन्यवाद


त्रुटि "अवैध आवेदना" का अर्थ है कि आप गलत प्रसंग के साथ एक कॉल करने योग्य फ़ंक्शन को कॉल करने का प्रयास कर रहे हैं, संदर्भ वस्तु को जिस वस्तु पर कहा जाता है वह मुझे console.log तोड़ने दें:

console.log(element.__proto__.ondrop)

यहां, आप element.__proto__.ondrop को लॉग करने की कोशिश कर रहे हैं element.__proto__.ondrop सबसे पहले, मुझे element.__proto__ । प्रत्येक ऑब्जेक्ट पर Object.prototype.__proto__ , ऑब्जेक्ट.प्रोटोटाइप Object.prototype.__proto__ एक Object.prototype.__proto__ गुण है जो उस ऑब्जेक्ट के प्रोटोटाइप को इंगित करता है और लुकअप चेन में विधियों को हल करने के लिए उपयोग किया जाता है। उदाहरण के लिए:

function Person(name) { //This is a constructor function
  this.name = name; //Set the name to be part of the instance
} 
Person.prototype.sayName = function() { //A function on the prototype
  console.log(this.name);               //and is part of the instance
}

const bob = new Person("Bob");
console.log(bob.__proto__); //The __proto__ property refers to `Person.prototype`
                            //and will log the `Person.prototype` object

यहां, उदाहरण के __proto__ के prototype को दर्शाता है जो उदाहरण का निर्माण करता है। अब, आपके मामले में, DOM से एक तत्व का HTMLDivElement के प्रोटोटाइप की HTMLDivElement पर कुछ और कुछ और होगा जिसके आधार पर यह किस प्रकार का तत्व है। इस उत्तर के प्रयोजन के लिए, हम कहेंगे कि यह एक div

अब, जब आप HTMLDivElement के प्रोटोटाइप के HTMLDivElement का उपयोग करने का प्रयास करते हैं, तो आपको एक अवैध आमंत्रण मिलता है क्योंकि आप HTMLDivElement प्रोटोटाइप से HTMLDivElement रूप से एक्सेस करने का प्रयास कर रहे हैं, वास्तविक HTMLDivElement तत्व नहीं ! यह "गलत संदर्भ" की ओर जाता है क्योंकि आप HTMLDivElement.prototype पर HTMLDivElement.prototype को कॉल करने का प्रयास कर रहे हैं, नहीं DOM से कोई div !

"इसे ठीक करें" करने के लिए, __proto__ कुंजी का उपयोग न करें। यदि आप तत्व की ondrop संपत्ति का उपयोग करना चाहते हैं, तो बस element.ondrop करें


आप console.log(element.__proto__.ondrop) नहीं कर सकते क्योंकि ondrop एक एक्सेसर-प्रॉपर्टी है।

एक्सेसर गुण? इस SO उत्तर के संदर्भ में

एक एसेचरर संपत्ति एक है जिसे गेटर्स और सेटर्स के संदर्भ में परिभाषित किया गया है, जो किसी संग्रहीत मूल्य के रूप में नहीं लिखा जा सकता है। "एक्सेसर फंक्शंस की जोड़ी" गेटर और सेटर फंक्शन को दर्शाती है।

यह जवाब भी देखें

तो मूल रूप से console.log(element.__proto__.ondrop) को कॉल करके आप इस संदर्भ को बिना उचित तत्व के ondrop कैलकुलेटर समारोह का उपयोग कर रहे हैं, जिसके परिणामस्वरूप अवैध इनोकेशन त्रुटि होती है।

कोड उदाहरण
बिंदु को स्पष्ट करने के लिए एक जावास्क्रिप्ट कोड उदाहरण

var Person = {
  firstname: "John",
  lastname: "Doe",
  get fullname() {
    return this.firstname + " " + this.lastname
  },
  set fullname(name) {
    this.firstname = name.split(' ')[0]
    this.lastname = name.split(' ')[1]
  }
}

console.log(Person.fullname) // will trigger the getter function 'fullname'

Person.fullname = "Jane Doe" // will trigger the setter function 'fullname'

console.log(Person.fullname) // logs Jane Doe

इसलिए जब आप console.log(element.__proto__.ondrop) कॉल करते हैं तो आप अनिवार्य रूप से मान्य संदर्भ के बिना ondrop प्राप्तकर्ता को ट्रिगर कर रहे हैं।

अद्यतन करें:

मुझे लगता है कि आप क्या करना चाहते थे, इसका निरीक्षण करना था कि ड्रैग-इवेंट फायरिंग क्यों नहीं कर रहे थे और आपने एक console.log(element.__proto__.ondrop) डाल दिया था, जो कि पहले से ही उत्तर दिया गया है, के कारण IllegalInvocation त्रुटि उत्पन्न हुई त्रुटि के पूरी तरह से अलग वर्ग तो आप डिबग करने की कोशिश कर रहे थे!

कारण है कि आपकी ड्रैग इवेंट फ़्लिकर नहीं कर रही हैं, वे हैंडलर इवेंट के अंदर फंक्शन कॉल है। प्रीवेन्ट डिफॉल्ट () , एमडीएन से उद्धृत

ईवेंट इंटरफ़ेस की रोकथाम () विधि उपयोगकर्ता एजेंट को बताती है कि यदि ईवेंट अनियंत्रित हो जाता है, तो इसकी डिफ़ॉल्ट कार्रवाई नहीं की जानी चाहिए क्योंकि यह सामान्य रूप से होगी।

आपके मामले में, डिफ़ॉल्ट क्रिया का मतलब ड्रैग-संबंधित कार्यक्षमता है, जो कि आप (अनजाने में) निष्पादन से रोक रहे हैं!

मेरा सुझाव है कि आप एमडीएन पर HTML5 खींचें और ड्रॉप एपीआई के बारे में अधिक पढ़ें।







html5sortable