精华内容
下载资源
问答
  • layerx的兼容性
    2021-09-15 21:09:22

    事件:网页中的操作行为

    事件对象属性

    • clientX/clientY:获取当前鼠标位置,相对于浏览器而言,等价于X,Y
    • pageX/pageY:获取当前鼠标位置,相对于页面而言,等价于layerX/layerY
    • offsetX/offsetY:获取当前鼠标位置,相对于事件标签而言

    事件绑定与取消

    事件绑定与取消需要进行浏览器兼容处理

    标准浏览器

              事件绑定: 元素.addEventListener(事件(不加on),事件处理函数,是否捕获(true/false))

              事件取消:元素.removeEventListener(事件(不加on),事件处理函数,是否捕获(true/false))

    ie浏览器

             事件绑定: 元素.attachEvent(事件(加on),事件函数)

              事件取消:元素.detachEvent(事件(加on),事件函数)

    事件绑定与取消

               标准浏览器: 

    var btn = document.querySelector("button") 
    
    // 2、标准事件绑定方式 
    function fn() { 
        alert("事件被触发了") 
    }
    function fn2() { 
        alert("事件再次被触发了......") 
    }
    function fn3(){
        alert("这是新增功能,没有修改原来功能的函数") 
    }
    if(btn.addEventListener) { 
        btn.addEventListener("click", fn, false) // 标准浏览器 
        btn.addEventListener("click", fn2, false)
        btn.addEventListener("click", fn3, false) // 新增代码,没 有修改原有代码 
    } else {
           btn.attachEvent("onclick", fn) // IE低版本浏览器 
           btn.attachEvent("onclick", fn2) 
           btn.attachEvent("onclick", fn3) // 新增代码,没有修改原有代码 
    }

    阻止事件冒泡

    标准浏览器:事件.stopPropagation()

    IE浏览器:事件.cancelBubble()

    if(event.stopPropagation){
                    event.stopPropagation
                }
                else{
                    event.cancelBubble = true
                }

    事件默认行为

    标准浏览器:元素.preventDefault()

    IE浏览器:元素.returnValue()

     // 阻止默认行为
            a.onclick = function(){
                var event = window.event||e
                if(event.preventDefault){
                    event.preventDefault()
                }else{
                    event.returnValue = false
                }
    
                alert("用户点击了超链接按钮...")
            }

     

    更多相关内容
  • window.event IE:有window.event对象 FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event) 鼠标... FF:event.layerX和event.layerY。 标签的x和y的坐标位置:sty
  • 1. document.form.item 问题 现有问题: 现有代码中存在许多 document.formName.item(“itemName”) 这样的语句,不能在 MF 下运行 解决方法: 改用 document.formName.elements[“elementName”] 其它 参见 2 2....
  • 整理一些JavaScript的IE和火狐的兼容性解决方法,有更好的方法多多交流
  • IE和Mozilla的兼容性汇总event,需要的朋友可以参考下。
  • IE和firefox的event事件兼容分析。
  • PageX/Y:返回鼠标指针的位置,相对于文档的左边缘与上边缘,会随着页面滚动而改变兼容性:除IE6/7/8不支持外,其余浏览器均支持<html><head><script type="text/javascript...

    PageX/Y:返回鼠标指针的位置,相对于文档的左边缘与上边缘会随着页面滚动而改变

    兼容性:除IE6/7/8不支持外,其余浏览器均支持

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(document).mousemove(function(e){ 
        $("span").text("X: " + e.pageX + ", Y: " + e.pageY); 
      });
    });
    </script>
    </head>
    <body>
    <p>鼠标指针位于: <span></span></p>
    </body>
    </html>

    clientX/Y 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标/垂直坐标。客户区指的是当前窗口。

    clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变

    兼容性:所有浏览器均支持


    offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左上角为基准点。

    兼容性:IE所有版本,chrome,Safari均完美支持,Firefox不支持


    layerX/Y获取到的是触发点相对被触发dom左上角的距离,数值与offsetX/Y相同,这个变量就是firefox用来替代offsetX/Y的,基准点为边框左上角,但是有个条件就是,被触发的dom需要设置为position:relative或者position:absolute,否则会返回相对html文档区域左上角的距离

    兼容性:IE6/7/8不支持,opera不支持,IE9/10和Chrome、Safari均支持


    screenX/Y 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标/垂直坐标

    screenX/Y获取到的是触发点相对显示器屏幕左上角的距离,不随页面滚动而改变

    兼容性:所有浏览器均支持



    展开全文
  • js兼容性的16个小问题

    2014-08-14 10:48:55
    javascript 代码在ie和火狐浏览器兼容性的16个小问题,帮你解决困扰
  • FF和IE的兼容性问题总结,FF和IE的兼容性问题总结,FF和IE的兼容性问题总结,FF和IE的兼容性问题总结
  • 能解决各种javascript在各大浏览器中的不兼容问题,让不兼容的程序兼容各大浏览器
  • Firefox与IE浏览器的javascript兼容性问题Firefox与IE浏览器的javascript兼容性问题Firefox与IE浏览器的javascript兼容性问题Firefox与IE浏览器的javascript兼容性问题Firefox与IE浏览器的javascript兼容性问题Fire...
  • document.getElementsByTagName("div")[0].getAttribute("width") 我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。 var bar = ...

    偷来的知识 嘿嘿

    document.getElementById("apple") 以ID来访问对象,且一个ID在页面中必须是唯一的

    document.getElementsByTagName("div")[0] 以标签名来访问对象

    1.setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

    设置对象的属性则应该采用:

    document.getElementById("apple").setAttribute("width","100")

    document.getElementsByTagName("div")[0].setAttribute("width","100")

    访问对象的属性则采用:

    document.getElementById("apple").getAttribute("width")

    document.getElementsByTagName("div")[0].getAttribute("width")

    我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。

    var bar = document.getElementById("foo");

    bar.setAttribute("onclick", "javascript:alert('This is a test!');");

    这里利用setAttribute指定e的onclick属性,简单,很好理解。但是IE不支持,IE并不是不支持setAttribute这个函数,

    而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和onclick这些属性

    在IE中是行不通的。为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。

    document.getElementById("foo").className = "fruit";

    document.getElementById("foo").style.cssText = "color: #00f;";

    document.getElementById("foo").style.color = "#00f";

    document.getElementById("foo").οnclick= function () { alert("This is a test!"); }

    2、关于class和className

    class属性在W3C DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。使用setAttribute("class", vName)语句动态设置

    Element的class属性在firefox中是行的通的,在IE中却不行。因为使用IE内核的浏览器不认识"class",要改用"className";

    同样,firefox 也不认识"className"。所以常用的方法是二者兼备:

    element.setAttribute("class", vName);

    element.setAttribute("className", vName);    //for IE

    关于IE下TABLE无法插入新行的问题

    IE下TABLE无论是用innerHTML还是appendChild插入

    都没有效果,而其他浏览器却显示正常。解决他的方法是,将加到TABLE的元素中,如下面所示:

    var row = document.createElement("tr");

    var cell = document.createElement("td");

    var cell_text = document.createTextNode("香蕉不吃苹果");

    cell.appendChild(cell_text);

    row.appendChild(cell);

    document.getElementsByTagName("tbody")[0].appendChild(row);

    window.event

    IE:有window.event对象

    FF:没有window.event对象。可以通过给函数的参数传递event对象。如οnmοusemοve=doMouseMove(event)

    鼠标当前坐标

    IE:event.x和event.y。

    FF:event.pageX和event.pageY。

    通用:两者都有event.clientX和event.clientY属性。

    鼠标当前坐标(加上滚动条滚过的距离)

    IE:event.offsetX和event.offsetY。

    FF:event.layerX和event.layerY。

    标签的x和y的坐标位置:style.posLeft 和 style.posTop

    IE:有。

    FF:没有。

    通用:object.offsetLeft 和 object.offsetTop。

    窗体的高度和宽度

    IE:document.body.offsetWidth和document.body.offsetHeight。注意:此时页面一定要有body标签。

    FF:window.innerWidth和window.innerHegiht,以及document.documentElement.clientWidth和document.documentElement.clientHeight。

    通用:document.body.clientWidth和document.body.clientHeight。

    添加事件

    IE:element.attachEvent("onclick", func);。

    FF:element.addEventListener("click", func, true)。

    通用:element.οnclick=func。虽然都可以使用onclick事件,但是onclick和上面两种方法的效果是不一样的, onclick只有执行一个过程,而attachEvent和addEventListener执行的是一个过程列表,也就是多个过程。例如: element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)这样func1和func2都会被执行。

    标签的自定义属性

    IE:如果给标签div1定义了一个属性value,可以div1.value和div1["value"]取得该值。

    FF:不能用div1.value和div1["value"]取。

    通用:div1.getAttribute("value")。

    父节点、子节点和删除节点

    IE:parentElement、parement.children,element.romoveNode(true)。

    FF:parentNode、parentNode.childNodes,node.parentNode.removeChild(node)。

    CSS:透明

    IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。

    FF:opacity:0.6。

    设置CSS 的STYLE

    document.getElementById('look').style.cssText="display:none;";//通用

    document.getElementById('look').setAttribute("style","display:none;");//firefox

    展开全文
  • 你对JS在IE和Firefox兼容性问题解决方法是否熟悉,这里和大家分享一下,比如现有代码中存在许多document.formName.item("itemName")这样的语句,不能在MF下运行。我们可以改用document.formName.elements[...

    你对JS在IE和Firefox兼容性问题解决方法是否熟悉,这里和大家分享一下,比如现有代码中存在许多document.formName.item("itemName")这样的语句,不能在MF下运行。我们可以改用document.formName.elements["elementName"]来解决。

    JS在IE和Firefox兼容性问题汇编

    以下以IE代替InternetExplorer,以MF代替MozzilaFirefox

    1.document.form.item问题

    (1)现有问题:

    现有代码中存在许多document.formName.item("itemName")这样的语句,不能在MF下运行

    (2)解决方法:

    改用document.formName.elements["elementName"]

    (3)其它

    2.集合类对象问题

    (1)现有问题:

    现有代码中许多集合类对象取用时使用(),IE能接受,MF不能。

    (2)解决方法:

    改用[]作为下标运算。如:document.forms("formName")改为document.forms["formName"]。

    又如:document.getElementsByName("inputName")(1)改为document.getElementsByName("inputName")[1]

    (3)其它

    3.window.event

    (1)现有问题:

    使用window.event无法在MF上运行

    (2)解决方法:

    MF的event只能在事件发生的现场使用,此问题暂无法解决。可以这样变通:

    原代码(可在IE中运行):

    οnclick="javascript:gotoSubmit()"/>

    ...

    functiongotoSubmit(){

    ...

    alert(window.event);//usewindow.event

    ...

    }

    新代码(可在IE和MF中运行):

    οnclick="javascript:gotoSubmit(event)"/>

    ...

    functiongotoSubmit(evt){

    evtevt=evt?evt:(window.event?window.event:null);

    ...

    alert(evt);//useevt

    ...

    }

    此外,如果新代码中***行不改,与老代码一样的话(即gotoSubmit调用没有给参数),则仍然只能在IE中运行,但不会出错。所以,这种方案tpl部分仍与老代码兼容。

    4.HTML对象的id作为对象名的问题

    (1)现有问题

    在IE中,HTML对象的ID可以作为document的下属对象变量名直接使用。在MF中不能。

    (2)解决方法

    用getElementById("idName")代替idName作为对象变量使用。

    5.用idName字符串取得对象的问题

    (1)现有问题

    在IE中,利用eval(idName)可以取得id为idName的HTML对象,在MF中不能。

    (2)解决方法

    用getElementById(idName)代替eval(idName)。

    6.变量名与某HTML对象id相同的问题

    (1)现有问题

    在MF中,因为对象id不作为HTML对象的名称,所以可以使用与HTML对象id相同的变量名,IE中不能。

    (2)解决方法

    在声明变量时,一律加上var,以避免歧义,这样在IE中亦可正常运行。

    此外,***不要取与HTML对象id相同的变量名,以减少错误。

    (3)其它

    7.event.x与event.y问题

    (1)现有问题

    在IE中,event对象有x,y属性,MF中没有。

    (2)解决方法

    在MF中,与event.x等效的是event.pageX。但event.pageXIE中没有。

    故采用event.clientX代替event.x。在IE中也有这个变量。

    event.clientX与event.pageX有微妙的差别(当整个页面有滚动条的时候),不过大多数时候是等效的。

    如果要完全一样,可以稍麻烦些:mX=event.x?event.x:event.pageX;然后用mX代替event.x

    (3)其它

    event.layerX在IE与MF中都有,具体意义有无差别尚未试验。

    8.关于frame

    (1)现有问题

    在IE中可以用window.testFrame取得该frame,mf中不行

    (2)解决方法

    在frame的使用方面mf和ie的最主要的区别是:

    如果在frame标签中书写了以下属性:

    那么ie可以通过id或者name访问这个frame对应的window对象,而mf只可以通过name来访问这个frame对应的window对象。例如如果上述frame标签写在最上层的window里面的htm里面,那么可以这样访问

    ie:window.top.frameId或者window.top.frameName来访问这个window对象

    mf:只能这样window.top.frameName来访问这个window对象

    另外,在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签,并且可以通过window.top.document.getElementById("testFrame").src='xx.htm'来切换frame的内容,也都可以通过window.top.frameName.location='xx.htm'来切换frame的内容

    9.在mf中,自己定义的属性必须getAttribute()取得

    10.在mf中没有parentElementparement.children而用

    parentNodeparentNode.childNodes

    childNodes的下标的含义在IE和MF中不同,MF使用DOM规范,childNodes中会插入空白文本节点。

    一般可以通过node.getElementsByTagName()来回避这个问题。

    当html中节点缺失时,IE和MF对parentNode的解释不同,例如

    MF中input.parentNode的值为form,而IE中input.parentNode的值为空节点

    MF中节点没有removeNode方法,必须使用如下方法node.parentNode.removeChild(node)

    11.const问题

    (1)现有问题:

    在IE中不能使用const关键字。如constconstVar=32;在IE中这是语法错误。

    (2)解决方法:

    不使用const,以var代替。

    12.body对象

    MF的body在body标签没有被浏览器完全读入之前就存在,而IE则必须在body完全被读入之后才存在

    13.urlencoding

    在js中如果书写url就直接写&不要写&例如varurl='xx.jsp?objectName=xx&objectEvent=xxx';

    frm.action=url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器

    一般会服务器报错参数没有找到

    当然如果是在tpl中例外,因为tpl中符合xml规范,要求&书写为&

    一般MF无法识别js中的&

    14.nodeName和tagName问题

    (1)现有问题:

    在MF中,所有节点均有nodeName值,但textNode没有tagName值。在IE中,nodeName的使用好象有问题。

    (2)解决方法:

    使用tagName,但应检测其是否为空。

    15.元素属性

    IE下input.type属性为只读,但是MF下可以修改

    16.document.getElementsByName()和document.all[name]的问题

    (1)现有问题:

    在IE中,getElementsByName()、document.all[name]均不能用来取得div元素(是否还有其它不能取的元素还不知道)。

    【编辑推荐】

    【责任编辑:程华权 TEL:(010)68476606】

    点赞 0

    展开全文
  • IE和Mozilla中脚本兼容性汇总 比较实用
  • js 兼容性

    2019-10-06 02:01:56
    js 兼容性 与时俱进 博客园 社区 首页 新随笔 联系 管理 订阅 随笔- 1470 文章- 0 评论- 146 兼容IE和FF的js脚本做法(比较常用) 做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有...
  • javascript的兼容性

    2019-08-11 18:30:14
    javascript的浏览器兼容问题是前端开发中一直存在的一个问题,和css兼容性一样,我们在开发过程中必须了解一些基本的兼容性处理方法,下面从以下几个方面总结下js开发常碰到的问题。 1 常用的方法兼容 2 样式访问...
  • 浏览器兼容性

    2018-08-09 10:27:12
    浏览器兼容性即网页兼容性或网站兼容性,是指因为不同浏览器使用内核及所支持的HTML等网页语言标准不同;以及客户端环境不同,如分辨率等,网页在各种浏览器上的显示效果可能不一致。 DOM兼容性: 在使用...
  • JavaScript的浏览器兼容问题是前端开发中一直存在的一个问题,和css兼容性一样,我们在开发过程中必须了解一些基本的兼容性处理方法,下面从以下几个方面总结下js开发常碰到的问题:1、常用的方法兼容;2、样式访问...
  • js浏览器兼容性问题

    2015-06-13 18:16:38
    这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码。就会造来客户的投诉,如果让BoSS知道了,这可不太好哦。下面是兼容IE和FF的js脚本做法和分解(部分选自网上):      .以下以 IE 代替 ...
  • 解决现有IE和firefox不兼容的问题,内有多种解决方法,请大家好好学习
  • 各大浏览器兼容性报告

    千次阅读 2016-03-04 09:57:09
    IE、FF、Safari、OP不同浏览器兼容报告 1 浏览器内核简介   Trident IE浏览器(GreenBrowser绿色浏览器, 遨游浏览器....都是IE) Geckos FireFox Presto Opera Webkit Safari、Chrome ...
  • IE浏览器和Firefox浏览器兼容性问题及解决办法 为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox : 1、//window.event IE:有window.event对象 FF:没有window.event对象。 ...
  • 在ie与火狐的兼容性

    2019-09-22 18:16:23
    1.在火狐下 document.getElementById("id").textContent可以获取当前获取id下的内容 而在ie下则为:document....JS在IE和Firefox兼容性问题汇编 以下以IE代替InternetExplorer,以MF代替MozzilaFirefox 1.docum...
  • JS的IE和Firefox兼容性

    2008-04-12 01:57:34
    JS的IE和Firefox兼容性总结
  • <!-- --> <html> <head> <script type="text/javascript"> /************************************************ 兼容 **********...
  • 简介 因为实际开发中,很少用到event对象的这几个值,每当写的时候又记不清,然后就要浪费时间去查找准确的资料,很是不爽,所以就...考虑到兼容性layerX,x不建议使用,layerX可以用offsetX代替,x可以用clientX代替
  • JS的浏览器兼容性

    2013-12-26 10:53:49
    使用JS一定要考虑浏览器兼容性。现在firefox的市场份额不容忽视,所以一个好的JS程序至少应该在主流的几个浏览器下能够正确运行。编写的时候遵循W3C标准,一般都不会有什么问题。 下面这篇文章讲述了如何进行JS的...
  • layerX && layerY

    2015-05-23 21:59:00
    转载:https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX UIEvent.layerX  非标准  这个属性是非标准的属性...在不同的浏览器上的实现由许多的兼容性问题。  而且,这个属性的行为将来还可能...
  • 事件兼容性

    2017-06-07 12:12:44
    <!... var left = e.layerX || e.offsetX; //判断是ie和非ie距离事件源的方法 var top = e.layerY || e.offsetY; document.title = left + '|' + top; } }
  • JAVASCRIPT兼容性问题

    2014-04-13 17:28:49
    另一方面,我们上面的假定也仅仅是假定,不能确保是这样,如果浏览器的某些对象或属性不能向后兼容,我们的代码也会产生问题,所以建议,少用浏览器版本的比较,更多情况下,应检测是要用的对象或属性是否得到支持。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,253
精华内容 501
关键字:

layerx的兼容性