1.js编写鼠标右击事件
<script type="text/javascript">
window.onload = function(){
//去掉默认的contextmenu事件,否则会和右键事件同时出现。
document.oncontextmenu = function(e){
e.preventDefault();
};
document.getElementById("test").onmousedown = function(e){
if(e.button ==2){
alert("你点了右键");
}else if(e.button ==0){
alert("你点了左键");
}else if(e.button ==1){
alert("你点了滚轮");
}
}
}
</script>
2.HTML5下DOM元素窗口中拖动(更改位置)
在非H5浏览器中,要想在窗口中靠鼠标移动DOM元素位置,需要在mousedown事件中记录鼠标和被拖动DOM的位置信息,在mousemove中呈现移动效果,然后在mouseup中改变最终位置。而在H5中省事了很多,利用dragable属性和drop事件很容易就做到:
HTML:
<div id="dragdiv" draggable="true" class="divblok">我要移动 </div>
JS:
var dragdiv = document.querySelector('#dragdiv');
var x, y; //记录到点击时鼠标到移动框左边和上边的距离
dragdiv.addEventListener('dragstart', function (e) {
e.dataTransfer.effectAllowed = "move"; //移动效果
e.dataTransfer.setData("text", ''); //附加数据, 没有这一项,firefox中无法移动
x = e.offsetX || e.layerX;
y = e.offsetY || e.layerY;
return true;
}, false);
document.addEventListener('dragover', function (e) {//取消冒泡 ,不取消则不能触发 drop事件
e.preventDefault()|| e.stopPropagation();
}, false);
document.addEventListener('drop', function (e) {
dragdiv.style.left = (e.pageX - x) + 'px';
dragdiv.style.top = (e.pageY - y) + 'px';
e.preventDefault() || e.stopPropagation(); //不取消,firefox中会触发网页跳转到查找setData中的内容
}, false);
3.js中出现NaN
当要计算的变量类型不统一时,会出现NaN
4.textarea
1)textarea禁止拖动
resize:none
2)textarea禁止输入
disabled:"disabled"
3)设置边框颜色
border: 1px solid red;