我通过函数创建新的对象，我创建了要使用的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/
我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje
为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar
我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test
我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que
我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c
我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file
我克隆了一个rails仓库，我现在正尝试捆绑安装背景:OSXElCapitanruby2.2.3p173(2015-08-18修订版51636)[x86_64-darwin15]rails-v在您的Gemfile中列出的或native可用的任何gem源中找不到gem'pg(>=0)ruby'。运行bundleinstall以安装缺少的gem。bundleinstallFetchinggemmetadatafromhttps://rubygems.org/............Fetchingversionmetadatafromhttps://rubygems.org/...Fe
在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee
