svg webtopo原型6 事件的鼠标属性_web-topo怎么实现点击事件-优快云博客

本文链接：https://blog.youkuaiyun.com/laputa73/article/details/7710689

这个是测试事件的属性。例如鼠标按钮，点击位置等。

Svg中的时间和页面其他元素是等效的，在IE/ASV中，则需要通过关键字evt，支持的属性有区别

IE和opera都支持的属性：

Event.button

Event.x

event.clientX

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
图例
</title>

<!-- legengd.html
 1.测试动态创建事件
 2.测试事件的属性(和ie的事件对比)

-->
</head>
<script type="text/javascript" language="javascript" src="./js/svgutil.js"></script>
<script>

</script>

<body bgcolor="#ffffff">

<br>
<button onclick="show()">开始</button><br>
<button onclick="testevt()">测试鼠标点击</button><br>
<button onclick="showsrc()">源码</button><br>
<div id="debug"></div>
<div id="divsvg">

</div>
</body>
<script>
var svg;
var svgdoc;
var plat;



function show(){

 svg=initSVG(300,300);
 //延迟一下，最小是10ms
 var tidst=window.setTimeout(show1,20);
}


function show1(){

 
 svgdoc=getSVGDocument(svg);
  
 plat=getrootg(svg,svgdoc);


 //创建一个矩形
 curentStyle="stroke:black;fill:green";
 var newRect=createrect(svgdoc,100,100,3,curentStyle);
 newRect.setAttribute("id",'confirmMask');
 
 //更换事件
 var img0=svgdoc.getElementById('confirmMask');
 //外部文件
 img0.setAttribute("onclick","hi()");
 //页面文件
 //img0.setAttribute("onclick","hi3(evt)");
  //页面外部文件
 //img0.setAttribute("onclick","hi4()");
 

 }
  function testevt(){
    //这两个属性是等效的
   //alert(event.x+","+event.y+" "+event.clientX+","+event.clientY);
    var debug=document.getElementById('debug');
   //alert(event.button);
    var str="even.x="+event.x+" event.clientX="+event.clientX+" event.offsetX="+event.offsetX;
    debug.innerHTML=str;
   }
   
  function hi3(evt){
  
   if(isIE){
   //ie。不支持x和y。不支持event
    //alert(evt.getClientX()+","+evt.getClientY()+" "+evt.x+","+evt.y+" "+evt.clientX+","+evt.clientY);
    //alert(event.x+ " "+event.y+" "+event.clientX+","+event.clientY);
    //onclick事件已经释放鼠标，ie和opera都是0
    alert(evt.getButton()+" "+evt.button);
   }
   else{
     //evt和event等效
    //alert(evt.x+","+evt.y+" "+evt.clientX+","+evt.clientY);
    //alert(event.x+ " "+event.y+" "+event.clientX+","+event.clientY);
    alert(evt.button+ " "+event.button);
   }
   
 }
</script>
</html>