onMouseDown="drag();" 和 XXX.onmousedown =function () {} 书写方式的奇怪差异, 求解！

xumei_ 2019-09-26 02:05:18

onMouseDown="drag();" 和 XXX.onmousedown =function () {}
onMouseDown的写法在拖动的时候会选中网页中的文字造成页面混乱，原因是什么？大神求解！！

直接看效果代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>左右可拖动的内容显示区</title>

    <style>

        ul,li{margin:0;padding:0;}

        body{font:14px/1.5 Arial;color:#666;}

        #box{position:relative;width:600px;height:400px;border:2px solid #000;margin:10px auto;overflow:hidden;}

        #box ul{list-style-position:inside;margin:10px;}

        #top,#bottom{color:#FFF;width:300px;height:400px;overflow:hidden;}

        #top{background:green; float:left;}

        #bottom{background:skyblue;float:right}

        #line1{position:absolute;top:0;left:50%;height:100%;width:20px;overflow:hidden;background:red;cursor:w-resize; color:#000}

        #line2{position:absolute;top:0;left:50%;height:100%;width:20px;overflow:hidden;background:#ccc;cursor:w-resize;color:#000}

        /*p { cursor: text; } !* css注释： 设置鼠标移动到html p对象时鼠标变为文本选择样式 *!*/

        /*a { cursor: pointer; } !* css注释： 设置鼠标移动到a超链接对象时鼠标变为手指形状（链接选择） *!*/

        /*body { cursor: url("小图片地址")} !* 设置鼠标指针默认为一个小图片 *!*/

    </style>

</head>

<body>

<center>左右拖动红条改变显示区域宽度<br>写法一在拖动的时候会选中网页中的文字页面混乱，写法二确没有这个问题，请问这个差异的原因是什么？ 写法二怎么写才能正常运行<br><span id="msg"></span></center>

<div id="box">

    <div id="top">

        <ul>

            <li><a href="#" target="_blank">jQuery初学实例代码集</a></li><li><a href="#" target="_blank">100多个ExtJS应用初学实例集</a></li>

            <li><a href="#" target="_blank">基于jQuery的省、市、县三级级联菜单</a></li>

            <li><a href="#" target="_blank">一个类似QQ网的JS相册展示特效</a></li>

            <li><a href="#" target="_blank">eWebEditor v4.60 最新通用精简版</a></li>

            <li><a href="#" target="_blank">FCKeditor 2.6.4.1 网页编辑器</a></li>

            <li><a href="#" target="_blank">jQuery平滑图片滚动</a></li>

            <li><a href="#" target="_blank">Xml+JS省市县三级联动菜单</a></li>

            <li><a href="#" target="_blank">jQuery 鼠标滑过链接文字弹出层提示的效果</a></li>

            <li><a href="#" target="_blank">JS可控制的图片左右滚动特效（走马灯）</a></li>

        </ul>

    </div>

    <div id="bottom">

        <ul>

            <li><a href="#" target="_blank">网页上部大Banner广告特效及图片横向滚动代码</a></li>

            <li><a href="#" target="_blank">FlexSlider网页广告、图片焦点图切换插件</a></li>

            <li><a href="#" target="_blank">兼容IE，火狐的JavaScript图片切换</a></li>

            <li><a href="#" target="_blank">jQuery仿ios无线局域网WIFI提示效果（折叠面板）</a></li>

            <li><a href="#" target="_blank">TopUp js图片展示及弹出层特效代码</a></li>

            <li><a href="#" target="_blank">jQuery仿Apple苹果手机放大镜阅读效果</a></li>

            <li><a href="#" target="_blank">Colortip 文字title多样式提示插件</a></li>

            <li><a href="#" target="_blank">网页换肤，Ajax网页风格切换代码集</a></li>

            <li><a href="#" target="_blank">超强大、漂亮的蓝色网页弹出层效果</a></li>

            <li><a href="#" target="_blank">jQuery 图像预览功能的代码实现</a></li>

        </ul>

    </div>

    <div id="line1" onMouseDown="drag();" style="display:" >写法一</div>

    <div id="line2" style="display:none"  >写法二</div>

</div>



<div style="text-align:center">

<input type="button" value="刷新页面" onClick="window.location.reload();">

<input type="button" value="使用写法一方式拖动" onClick="set(1)">

<input type="button" value="使用写法二方式拖动" onClick="set(2)">

</div>



</body>

    <script>

function cancelBubble(e) { 

	var e =arguments.callee.caller.arguments[0]; 

	try{e.stopPropagation();}catch(e){};

	try{e.cancelBubble=true;}catch(e){};

	

	var e= event || window.event;

	try{window.event?e.cancelBubble:e.stopPropagation();}catch(e){};



	if (e && e.stopPropagation){

		e.stopPropagation();

	}

	else{

		e.cancelBubble=true;

	}

 }









	

var disX ;

var oBox = $("box"), oTop = $("top"), oBottom = $("bottom")

var bg=0;

var oLine = $("line1");	

	

function set(id){

	if(id==1){

		document.getElementById("line1").style.display='';

		document.getElementById("line2").style.display='none';

		oLine = $("line1");	

		

	}

	if(id==2){

		document.getElementById("line1").style.display='none';

		document.getElementById("line2").style.display='';

		oLine = $("line2");	

	}

}

function $(id) {

	return document.getElementById(id)

}









function drag(){



	var e = window.event || arguments.callee.caller.arguments[0];

		disX = (e || event).clientX;

		oLine.left = oLine.offsetLeft;

		bg=1;

		//oLine.setCapture && oLine.setCapture();

		return false



}



document.getElementById("line2").onmousedown =function () {

		var e = window.event || arguments.callee.caller.arguments[0];

		disX = (e || event).clientX;

		oLine.left = oLine.offsetLeft;

		bg=1

		return false

	};

 



document.onmousemove = function(e) {

	if(bg==0) return false;

	var iT = oLine.left + ((e || event).clientX - disX);

	var e=e||window.event,tarnameb=e.target||e.srcElement;

	var maxT = oBox.clientWight - oLine.offsetWidth;

	oLine.style.margin = 0;

	iT < 0 && (iT = 0);

	iT > maxT && (iT = maxT);

	oLine.style.left = oTop.style.width = iT + "px";

	oBottom.style.width = oBox.clientWidth - iT + "px";

	$("msg").innerText='top.width:'+oLine.style.width+'---bottom.width:'+oBottom.style.width+'---oLine.offsetLeft:'+oLine.offsetLeft+'---disX:'+disX+'---tarnameb:'+tarnameb.tagName;

	return false

};



document.onmouseup = function() {

	bg=0;

	return false;

//	document.onmousemove = null;

//	document.onmouseup = null;

//	oLine.releaseCapture && oLine.releaseCapture()

};







</script>



</html>