一. 定义 DOM 中鼠标指针的样式

<script type="text/javascript">
	window.onload=function(){
		//获取 dom 元素
		var dom = document.getElementsByClassName("page")[0];
		// css形式，修改鼠标指针样式
		dom.style.cursor = 'pointer';
	}
</script>
1
2
3
4
5
6
7
8

更多样式:

二. 定义 DOM 中鼠标移进、移出方法

1. 鼠标移进： onmouseover="mOver(this)
2. 鼠标移出： onmouseout="mOut(this)
3. 这里方法为：改变文字大小

<div class="page" onmouseover="mOver(this);"  onmouseout="mOut(this);">Hello，你好！</div>
1

<script type="text/javascript">
	//鼠标指针移进
	function mOver(evt){
		evt.style.fontSize = '20px'; //调整字体大小为20px
	}   
	//鼠标指针移出
	function mOut(evt){
		evt.style.fontSize = ''; //调整字体大小为默认
	}
</script>
1
2
3
4
5
6
7
8
9
10

三. 禁用鼠标右键

<script type="text/javascript">
	document.oncontextmenu = function(){
		event.returnValue = false;
	}
	//或者直接返回整个事件
	document.oncontextmenu = function(){
		return false;
	}
</script>
1
2
3
4
5
6
7
8
9

四. 禁止选取

1. 指定 DOM

   onselectstart="return false"

   <div class="page" onselectstart="return false">Hello，你好！</div>
   1

2. 整个网页

   <script type="text/javascript">
   	document.onselectstart = function(){
   		event.returnValue = false;
   	}
   	//或者直接返回整个事件
   	document.onselectstart = function(){
   	   return false;
   	}
   </script>
   1
   2
   3
   4
   5
   6
   7
   8
   9

五. 禁止复制

1. 指定 DOM

   oncopy="return false"
oncut="return false"

   <div class="page" oncopy="return false" oncut="return false">Hello，你好！</div>
   1

2. 整个网页

   <script type="text/javascript">
   	document.oncopy = function(){
   	    event.returnValue = false;
   	}
   	// 或者直接返回整个事件
   	document.oncopy = function(){
   	    return false;
   	}
   </script>
   1
   2
   3
   4
   5
   6
   7
   8
   9

六. 禁止粘贴

onpaste="return false"

<div class="page" >Hello，你好！</div>
<input type="text" onpaste="return false" />
1
2

七. 禁用键盘 F12 事件

<script type="text/javascript">
	document.onkeydown=function (e){
	    var currKey=0,evt=e||window.event;
	    currKey=evt.keyCode||evt.which||evt.charCode;
	    if (currKey == 123) {
	        window.event.cancelBubble = true;
	        window.event.returnValue = false;
	    }
	}
</script>
1
2
3
4
5
6
7
8
9
10