js--去除默认事件连续移动的div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; position:absolute; background:#F00; top:0; left:0;}
</style>
<script>
window.onload=function(){
    var oDiv=document.getElementById(‘div1‘);
    var i=r=t=b=false;
document.addEventListener(‘keydown‘,function(ev){
    var oEvent=ev||event;

    switch(oEvent.keyCode){
        case 37: i=true; break;
        case 38: r=true; break;
        case 39: t=true; break;
        case 40: b=true; break;

        }
        },false);
document.addEventListener(‘keyup‘,function(ev){
       var oEvent=ev||event;

      switch(oEvent.keyCode){
          case 37: i=false; break;
          case 38: r=false; break;
          case 39: t=false; break;
          case 40: b=false; break;

          }

    },false);

    setInterval(function(){
        if(i) oDiv.style.left=oDiv.offsetLeft-10+‘px‘;
        if(t) oDiv.style.left = oDiv.offsetLeft + 10 + "px";
        if(r) oDiv.style.top = oDiv.offsetTop - 10 + "px";
        if(b) oDiv.style.top = oDiv.offsetTop + 10 + "px";
        },1)

    };
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>

时间： 2025-01-14 07:54:26

js--去除默认事件连续移动的div的相关文章

js阻止默认事件的发生

方法一: 如果使用的是DOM0级的事件处理程序,则可以在绑定的函数后边写return false: ele.onclick = function(){ //更改后的事件处理 return false;//默认事件阻止 } 方法二: 如果使用的是DOM2级的事件处理程序,则必须使用event.preventDefault()(非IE)或者event.returnValue = false; 浏览器兼容的写法: function preventDefault(event){ var event =

js阻止默认事件与js阻止事件冒泡

e.stopPropagation(); //阻止事件冒泡功能:停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // 因此它支持W3C的stopPropagation()方法 e.stopPropagation(); } else { // 否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } }

js阻止默认事件、拖拽等等

1.自定义右键菜单: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 * {margin:0; padding:0; list-style:none;} 8 #div1 {position:absolute; width:80px; background:#CC

js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.preventDefault(); -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件例: 复制代码代码如下: <a href="http://www.baidu.com" target="_bl

vue.js阻止事件冒泡和默认事件

首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器原生JS阻止默认事件方法: e.preventDefault(); //非IE浏览器window.event.returnValue = false; //IE浏览器而vue.js给我们提供了更简便的方法,我们可以通过function($event)来获取事件对象,$event.target则是选择发生事件的目标元

javascript, jQuery阻止默认事件和冒泡事件

事件冒泡(event bubbling) 事件冒泡是指一个元素上的事件被触发,然后这个事件按嵌套顺序在父级元素上触发,直至document根节点. 例如: <!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click Me</div>

js中阻止事件冒泡和浏览器默认行为

在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] 1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagat

JS如果阻止事件冒泡和浏览器默认事件

原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下JavaScript阻止默认事件与JavaScript阻止事件冒泡示例. (1)阻止冒泡事件注:嵌套元素一般都存在冒泡事件,会带来某些影响最外层标签:outer,中间层标签:center,最内层标签:inner,并且在outer.center.inner都添加了alert弹框事件,在正常思维情况下

JS阻止冒泡事件以及默认事件发生的简单方法

如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父元素的点击事件,那么就需要调用如下函数: 代码如下: function stopBubble(e){ if(e&&e.stopPropagation){//非IE e.stopPropagation(); } else{//IE window.event.cancelBubble=true;