个人中心
gpt4 book ai didi

javascript - addeventlistener 丢弃错误 "Uncaught TypeError: Illegal invocation"

转载 作者：可可西里 更新时间：2023-11-01 02:41:48 24 4
gpt4 key购买 nike

我通过函数创建新的对象，我创建了要使用的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

这是在 goesCallback 函数中，当我拖动 .sorterItem 并放下它时。它可以杀死浏览器。

所以，在 sortable 方法中，我有 console.log(element.__proto__.ondrop) 来查看某行的错误。

如何修复这个错误？

谢谢大家

最佳答案

您不能执行 console.log(element.__proto__.ondrop)，因为 ondrop 是访问器属性。

Accessor Properties? 引用这个SO Answer

An accessor property is one that is defined in terms of getters and setters, not as a stored value that might be written to. The "pair of accessor functions" denotes the getter and the setter function.

另见 this answer

所以基本上通过调用 console.log(element.__proto__.ondrop) 你是在调用元素的 ondrop getter 函数而没有适当的 this context结果是 Illegal Invocation错误。

代码示例
一个javascript代码示例来说明这一点

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 getter。

更新:

我想你想做的是检查为什么拖动事件没有触发，你最终放了一个 console.log(element.__proto__.ondrop) ，因为它已经回答，导致 IllegalInvocation 错误，导致与您尝试调试的错误类别完全不同的错误!

您的拖动事件未触发的原因是处理程序内部的函数调用 Event.preventDefault() , 引自 MDN

The Event interface's preventDefault() method tells the user agent that if the event goes unhandled, its default action should not be taken as it normally would be.

在您的情况下，默认操作 表示与拖动相关的功能，您(无意中)阻止了执行!

我建议您阅读更多关于 HTML5 Drag and Drop API 的内容在 MDN 上。

关于javascript - addeventlistener 丢弃错误 "Uncaught TypeError: Illegal invocation"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44361981/

24 4 0
文章推荐： java - 以格式 1 << n 向左移位的倒数
文章推荐： Java TCP 选项
文章推荐： java - 从 Java 调用 shell 命令不好吗？
文章推荐： .net - UserNamePasswordValidator 和证书
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com