触摸事件例子
ontouchstart
ontouchmove
ontouchend
ontouchcancel目前移动端浏览器均支持这4个触摸事件，包括IE。由于触屏也支持MouseEvent，因此他们的顺序是需要注意的：touchstart → mouseover → mousemove → mousedown → mouseup → click1
/
onTouchEvent
/
var div = documentgetElementById("div");
//touchstart类似mousedown
divontouchstart = function(e){
//事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，从而可以通过touches获取多点触控的每个触控点
//由于我们只有一点触控，所以直接指向[0]
var touch = etouches[0];
//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY
var x = touchclientX;
var y = touchclientY;
};
//touchmove类似mousemove
divontouchmove = function(e){
//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时浏览器的缩放、滚动条滚动等
epreventDefault();
};
//touchend类似mouseup
divontouchup = function(e){
//nothing to do
};
鼠标上变化的文字
脚本说明:
把如下代码加入<body>区域中
<SCRIPT language="JavaScript12">
<!--
var scroller_msg='Hi,网络编程站欢迎你的光临!'
var dismissafter=0
var initialvisible=0
if (documentall)
documentwrite('<marquee id="curscroll" style="position:absolute;width:150px;border:1px solid black;font-size:14px;background-color:white;visibility:hidden">'+scroller_msg+'</marquee>')
function followcursor(){
//move cursor function for IE
if (initialvisible==0){
curscrollstylevisibility="visible"
initialvisible=1
}
curscrollstyleleft=documentbodyscrollLeft+eventclientX+10
curscrollstyletop=documentbodyscrollTop+eventclientY+10
}
function dismissmessage(){
curscrollstylevisibility="hidden"
}
if (documentall){
documentonmousemove=followcursor
documentondblclick=dismissmessage
if (dismissafter!=0)
setTimeout("dismissmessage()",dismissafter1000)
}
//-->
</SCRIPT>
================================
鼠标箭头效果
脚本说明:
把如下代码加入<body>区域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var x, y, xold, yold, xdiff, ydiff;
var dir = Array();
dir[0] = "n-resize";
dir[1]="ne-resize";
dir[2]="e-resize";
dir[3]="se-resize";
dir[4] = "s-resize";
dir[5]="sw-resize";
dir[6]="w-resize";
dir[7]="nw-resize";
documentonmousemove = FindXY;
function display(direction) {
documentbodystylecursor = dir[direction];
}
function FindXY(loc) {
x = (documentlayers) locpageX : eventclientX;
y = (documentlayers) locpageY : eventclientY;
xdiff = x - xold;
ydiff = y - yold
if ((xdiff < 2) && (ydiff < -2)) display(0);
if ((xdiff < 2) && (ydiff > 2)) display(4);
if ((xdiff > 2) && (ydiff < 2)) display(2);
if ((xdiff < -2) && (ydiff < 2)) display(6);
if ((xdiff > 2) && (ydiff > 2)) display(3);
if ((xdiff > 2) && (ydiff < -2)) display(1);
if ((xdiff < -2) && (ydiff > 2)) display(5);
if ((xdiff < -2) && (ydiff < -2)) display(7);
xold = x;
yold = y;
}
// End -->
</script>
您好！很高兴为您答疑！
火狐浏览器不支持windowevent,只支持event。
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取鼠标在Canvas中的坐标位置</title>
<style>
#canvas{
border:1px solid #ccc;
width:300px;
height:300px;
overflow:hidden;
}
</style>
<script>
function get_canvas(ev,obj){
m_clientX = evclientX-objoffsetLeft;
m_clientY = evclientY-objoffsetTop;
documentgetElementById("tips")innerHTML = "当前坐标：X："+ m_clientX + " ,Y：" +m_clientY;
}
</script>
</head>
<body>
<div id="tips"></div>
<div id="canvas" onmousemove="get_canvas(event,this)"></div>
</body>
</html>
兼容IE8+
用 javascript 获取当前页面上鼠标（光标）位置在许多情况下都会用到，比如拖放，悬停提示（tooltip） 等等。当然，这里我们依然要面对浏览器的兼容问题，在不同的浏览器下，对这些相关的属性处理方式也不同。
参考资料
首页 → 网络编程 → JavaScript → javascript技巧 → js获取鼠标位置实例详解脚本之家[引用时间2018-1-18]
<title>Js获取适时获取鼠标坐标值并显示</title>
<script type="text/javascript">
var getCoordInDocumentExample = function(){
var coords = documentgetElementById("coords");
coordsonmousemove = function(e){
var pointer = getCoordInDocument(e);
var coord = documentgetElementById("coord");
coordinnerHTML = "X,Y=("+pointerx+", "+pointery+")";
}
}
var getCoordInDocument = function(e) {
e = e || windowevent;
var x = epageX || (eclientX +
(documentdocumentElementscrollLeft
|| documentbodyscrollLeft));
var y= epageY || (eclientY +
(documentdocumentElementscrollTop
|| documentbodyscrollTop));
return {'x':x,'y':y};
}
windowonload = function(){
getCoordInDocumentExample();
};
</script>
<div id="coords" style="width:500px;height:200px;background:#F2F1D7;border:2px solid #0066cc;">
请在此移动鼠标。
</div>
<br />
<div id="coord" style="width:500px;border:2px solid #336699;"> </div>
你说的那一般是js实现的，那就相对复杂多了，其中涉及到事件也很多。具体问题还是要具体看，现在很多在非ie下的代码不少都是用html5+css3完成的，因为只有ie对html5支持最差。
以上就是关于js，怎么给banner大图轮播加触摸事件；全部的内容，包括:js，怎么给banner大图轮播加触摸事件；、需要一段html代码，使鼠标指针后附带文字，移动鼠标，文字可随之飘动，望能提供这样的代码，谢谢！、firefox获得event了，可是为何event.clientX仍是为undefined等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）