javascript - 关于jquery，重复click问题
本文介绍了javascript - 关于jquery，重复click问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
这是html文件，内有一个宽高80px的盒子
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='onc事件.js'></script>
<script type='text/javascript' src='自制界面库.js'></script>
</head>
<body>
<div id='one' style="width:80px;height:80px;"></div>
</body>这是onc事件.js，想要达到点击div使其变灰
window.onload=function(){
$('#one').click(function(){
$('#one').css('backgroundColor','#ccc');
});
}至于库则是模仿jquery的click和css方法自己写的
现在的问题是div元素可以重复点击，第一次变色，但点一次报错一次
请问如何在不重写click方法、不设置计数器、不屏蔽报错的情况下改正这个报错,还有这到底是什么错误？
补充说明：那个库
var $ =function(args){return new Base(args);}
function Base(args) {
//创建一个数组，来保存获取的节点和节点数组
this.elements = [];
if (typeof args == 'string') {
if (args.indexOf(' ') != -1) {
var elements = args.split(' '); //把节点拆开分别保存到数组里
var childElements = []; //存放临时节点对象的数组，解决被覆盖的问题
var node = []; //用来存放父节点用的
for (var i = 0; i < elements.length; i ++) {
if (node.length == 0) node.push(document); //如果默认没有父节点，就把document放入
switch (elements[i].charAt(0)) {
case '#' :
childElements = []; //清理掉临时节点，以便父节点失效，子节点有效
childElements.push(this.getId(elements[i].substring(1)));
node = childElements; //保存父节点，因为childElements要清理，所以需要创建node数组
break;
case '.' :
childElements = [];
for (var j = 0; j < node.length; j ++) {
var temps = this.getClass(elements[i].substring(1), node[j]);
for (var k = 0; k < temps.length; k ++) {
childElements.push(temps[k]);
}
}
node = childElements;
break;
default :
childElements = [];
for (var j = 0; j < node.length; j ++) {
var temps = this.getTagName(elements[i], node[j]);
for (var k = 0; k < temps.length; k ++) {
childElements.push(temps[k]);
}
}
node = childElements;
}
}
this.elements = childElements;
} else {
//find模拟
switch (args.charAt(0)) {
case '#' :
this.elements.push(this.getId(args.substring(1)));
break;
case '.' :
this.elements = this.getClass(args.substring(1));
break;
default :
this.elements = this.getTagName(args);
}
}
} else if (typeof args == 'object') {
if (args != undefined) { //_this是一个对象，undefined也是一个对象，区别与typeof返回的带单引号的'undefined'
this.elements[0] = args;
}
} else if (typeof args == 'function') {
this.ready(args);
}
}
Base.prototype.css = function (attr, value) {
for (var i = 0; i < this.elements.length; i ++) {
if (arguments.length == 1) {
return getStyle(this.elements[i], attr) ;
}
this.elements[i].style[attr] = value;
}
return this;
}
Base.prototype.click=function(fn){ /*这个是Base对象添加onclick的方法*/
for(var i=0;i<this.elements.length;i++){
this.elements[i].onclick=fn;
}return this;
}
/*三个基础的获取节点的原型*/
Base.prototype.getId=function(id){
this.elements.push(document.getElementById(id));
return this;
}
Base.prototype.getTagName=function(tag,parentNode){
var node= null;
var temps=[];
if(parentNode!=undefined){
node=parentNode;
}else{
node=document;
}
var tags=node.getElementsByTagName(tag);
for(var u=0;u<tags.length;u++){
temps.push(tags[u]);
}return tags;
}
Base.prototype.getClass=function(className){/*Base对象获取有某个class名字的元素的个数*/
var all=document.getElementsByTagName('*');
for(var i=0;i<all.length;i++){
if(all[i].className==className){
this.elements.push(all[i]);
}
}
return this;
}
解决方案
Cannot set property 'backgroundColor' of undefined
翻译：不能给未定义设置属性'backgroundColor'
然后想想，是不是写错了，background-color我这里都有提示~~
结论:当出现bug，一定要看懂错误提示,有道翻译下就行了
这篇关于javascript - 关于jquery，重复click问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
