@EncyKe
2016-10-26T02:46:47.000000Z
字数 3816
阅读 1405
#手记
addClass()
<snippet>
<content><![CDATA[
function addClass(element, toAddClass) {
if (!!element.classList) {
element.classList.add(toAddClass)
} else {
var existence = element.className.indexOf(toAddClass)
if (existence < 0) {
element.className += toAddClass;
}
}
}
addClass(${1:DOMelement}, '${2:any-class}');
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>addClass</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js, text.html</scope>
</snippet>
removeClass()
<snippet>
<content><![CDATA[
function removeClass(element, toDelClass) {
if (!!element.classList) {
element.classList.remove(toDelClass);
} else {
var classNames = element.className.split(/\s+/);
var pos = -1,
i,
len = classNames.length;
for (i = 0; i < len; i++ ) {
if (classNames[i] == toDelClass) {
pos = i;
break;
}
}
classNames.splice(i, 1);
element.className = classNames.join(' ');
}
}
removeClass(${1:DOMelement}, '${2:any-class}');
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>removeClass</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js, text.html</scope>
</snippet>
toggleClass()
<snippet>
<content><![CDATA[
function toggleClass(element, toToggleClass) {
if (!!element.classList) {
element.classList.toggle(toToggleClass);
} else {
var classNames = element.className.split(/\s+/);
var pos = -1,
i,
len = classNames.length;
for (i = 0; i < len; i++ ) {
if (classNames[i] == toToggleClass) {
pos = i;
break;
}
}
if (pos == -1) {
classNames.push(toToggleClass)
} else {
classNames.splice(i, 1);
}
element.className = classNames.join(' ');
}
}
toggleClass(${1:DOMelement}, '${2:any-class}');
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>toggleClasses</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js, text.html</scope>
</snippet>
<snippet>
<content><![CDATA[
var eventUtil = {
addEventHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
},
getEvent: function(event) {
return event ? event : window.event;
},
// For mouseover, mouseout events
getRelatedTarget: function(event) {
if (event.relatedTarget) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else {
return null;
}
},
// For mousedown, mouseup events
getButton: function(event) {
if (document.implementation.hasFeature('MouseEvents', '2.0')) {
return event.button;
} else {
switch (event.button) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
// For mouseWheel event
getWheelDelta: function(event) {
if (event.wheelDelta) {
return event.wheelDelta;
} else {
return -event.detail * 40;
}
},
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault;
} else {
event.returnValue = false;
}
},
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation;
} else {
event.cancelBubble = true;
}
},
removeEventHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
}
};
var ${4:process} = function(event) {
var event = eventUtil.getEvent(event),
target = eventUtil.getTarget(event);
${1:// ... process code goes here}
}
eventUtil.addEventHandler(${2:ele}, '${3:eventType}', $4);
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>eventUtil</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js</scope>
</snippet>