JavaScript中的跨浏览器事件操作的基本方法整理

绑定事件

EU.addHandler = function(element,type,handler){
  //DOM2级事件处理,IE9也支持
  if(element.addEventListener){
    element.addEventListener(type,handler,false);
  }
  else if(element.attachEvent){
    //type加'on'
    //IE9也可以这样绑定
    element.attachEvent('on' + type,handler);
  }
  //DOM0级事件处理步,事件流也是冒泡
  else{
    element['on' + type] = handler;
  }
};

取消绑定事件
和绑定事件的处理基本一致,有一个注意点:
传入的handler必须与绑定事件时传入的相同(指向同一个函数)

EU.removeHandler = function(element,type,handler){
  if(element.removeEventListener){
    element.removeEventListener(type,handler);
  }
  else if(element.attachEvent){
    element.detachEvent('on' + type,handler);
  }
  else{
    //属性置空就可以
    element['on' + type] = null;
  }
};

跨浏览器添加事件

  function addEvent(obj,type,fn){
    if(obj.addEventListener){
      obj.addEventListener(type,fn,false);
    }else if(obj.attachEvent){//IE
      obj.attchEvent('on'+type,fn);
    }
  }

   
跨浏览器移除事件

function removeEvent(obj,type,fn){
  if(obj.removeEventListener){
    obj.removeEventListener(type,fn,false);
  }else if(obj.detachEvent){//兼容IE
    obj.detachEvent('on'+type,fn);
  }
}

跨浏览器阻止默认行为

function preDef(ev){
    var e = ev || window.event;
    if(e.preventDefault){
      e.preventDefault();
    }else{
      e.returnValue =false;
    }
  }

   
跨浏览器获取目标对象

function getTarget(ev){
  if(ev.target){//w3c
    return ev.target;
  }else if(window.event.srcElement){//IE
    return window.event.srcElement;
  }
}

跨浏览器获取滚动条位置

//跨浏览器获取滚动条位置,sp == scroll position
  function getSP(){
    return{
      top: document.documentElement.scrollTop || document.body.scrollTop,
      left : document.documentElement.scrollLeft || document.body.scrollLeft;
    }
  }

跨浏览器获取可视窗口大小

     function getWindow () {
      if(typeof window.innerWidth !='undefined') {
        return{
          width : window.innerWidth,
          height : window.innerHeight
        }

      } else{
        return {
          width : document.documentElement.clientWidth,
          height : document.documentElement.clientHeight
        }
      }
    },
时间: 2016-05-18

js判断主流浏览器类型和版本号的简单实现代码

如今的互联网中,浏览器可以说是太多太多了,但是大部分都是换壳不换心,基本上主流的浏览器还是火狐,谷歌,IE,safrai这几种比较常见,所以在我们的开发中,有时候需要遇到判断用户正在使用什么浏览器以及使用的版本是多少,并根据返回值,给予一定的提示,下面,我就简单的介绍一种判断用户浏览器的使用情况的代码. var distinguishBrowser= function browserInfo() { var browser = { // IE浏览器 msie: false, // 谷歌浏览器 c

javascript 浏览器类型和版本号检测代码(兼容多浏览器)

javascript检测浏览器类型和版本号(兼容各浏览器) var uA = navigator.userAgent; var browserType = "unknown"; if (uA.indexOf("Opera") > -1) { browserType = "Opera"; } else if (uA.indexOf("Safari") > -1) { browserType = "Safar

js阻止浏览器默认行为的简单实例

js阻止浏览器默认行为的简单实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a id="a1" href="http://www.baidu.com">百度</a> <script> fun

JavaScript中解决多浏览器兼容性23个问题的快速解决方法

一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

js 浏览器版本及版本号判断函数2009年

js判断浏览器版本及版本号 window["MzBrowser"]={};(function() { if(MzBrowser.platform) return; var ua = window.navigator.userAgent; MzBrowser.platform = window.navigator.platform; MzBrowser.firefox = ua.indexOf("Firefox")>0; MzBrowser.opera = ty

js阻止默认浏览器行为与冒泡行为的实现代码

在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1. 阻止浏览器的默认行为 function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.preventDefault) { //阻止默认浏览器动作(W3C) e.preventDefault(); } else { //IE中阻止函数器默认动作的方式 window.event.returnVa

js阻止浏览器默认行为触发的通用方法(推荐)

js阻止浏览器默认行为触发的通用方法(推荐) //阻止浏览器默认行为触发的通用方法 function stopDefault(e){ //防止浏览器默认行为(W3C) if(e && e.preventDefault){ e.preventDefault(); } //IE中组织浏览器行为 else{ window.event.returnValue=fale; } return false; } 以上这篇js阻止浏览器默认行为触发的通用方法(推荐)就是小编分享给大家的全部内容了,希望能给

js停止冒泡和阻止浏览器默认行为的简单方法

停止冒泡通用方法: function stopBubble(e) { //如果提供了事件对象,是非IE浏览器 if ( e && e.stopPropagation ) //使用W3C的stopPropagation()方法 e.stopPropagation(); else //使用IE的cancelBubble = true来取消事件冒泡 window.event.cancelBubble = true; } 阻止浏览器默认行为-通用方法 //阻止浏览器的默认行为 function s

Javascript 阻止浏览器默认操作的实现代码

在很多时候,我们需要改变这些默认操作,比如:点击一个链接时,我们执行一些 ajax 操作,但是我们并不希望执行跳转动作,于是,就有了本文:阻止浏览器默认操作. 其实这并不是一个非常难的课题,单独拿出来的原因还是浏览器兼容问题: 复制代码 代码如下: <script type="text/javascript"> // 说明:Javascript 中阻止浏览器默认操作 // 作者:John Resig function stopDefault( e ) { // Preven

js去除浏览器默认底图的方法

本文实例讲述了js去除浏览器默认底图的方法.分享给大家供大家参考.具体分析如下: 我们在设计一些图片比较多的网页时,为了增强用户体验,希望图片加载的时候有个loading动画效果,而不是由空白到一下子出来. 在zen cart的二次开发过程中同样也遇到了这个问题,下面是我的解决方案. 首页给图片设置一个默认的loading动画,再分配一个id, 如<img  id="loading1″  src="loading.gif">实际上加载过程通过一个函数来完成 fun

JS阻止事件冒泡行为和闭包的方法

阻止事件冒泡行为,要是不阻止的话,点击div的时候也会同时触发body事件 html代码 <body onclick='load()'> <div onclick='cli()'> click this </div> </body> css代码 div{ width:200px; height:200px; border:1px red solid; } js代码 function load(){ console.log('body') } function

js添加事件的通用方法推荐

js添加事件的通用方法推荐 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br> 点击此p标签,绑定了2个弹

js实现页面跳转的五种方法推荐

js实现页面跳转的五种方法推荐 第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.location.href="xx.jsp?backurl="+window.location.href; </script> 第二种: 复制代码 代码如下: <script language="javascript&quo

JS中的forEach、$.each、map方法推荐

forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环.例如下面这个例子: [1, 2 ,3, 4].forEach(alert); 等同于下面这个for循环 var array = [1, 2, 3, 4]; for (var k = 0, length = array.length; k < length; k++) { alert(array[k]); } Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach方法中的function回

Js得到radiobuttonlist选中值的两种方法(推荐)

如下所示: <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ajaxselect.OnmouseTitle.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >