• 由object元素引出的事件注册问题和层级显示问题


    项目有一个双击监控视频全屏的需求,视频播放使用的是IE下的ActiveX控件,web页面中使用HTML嵌入对象元素object。预期方案如下:

    1.在开发ActiveX控件时加入双击事件。

    2.通过div包裹object,控制div的大小从而间接实现全屏效果。

    在实施第二种方案的过程中,发现如下两个问题:

    事件注册问题

    在第二种方案中,首先经过测试添加单击或双击事件均无响应。

    (疑问1:object不支持单双击事件?但在IE下发现这种方式可以响应:

    function fullscreen(a){alert(a);}
    /**
    *错误的方式:不传参数,会弹出undefined,会直接执行fullScreen函数,这段代码相当于如下两行:
    *var temp=fullScreen(); 
    *document.getElementById("objectid").onclick=temp;
    */
    document.getElementById("objectid").onclick=fullScreen();
    /**
    *错误的方式:传参数时,会弹出1,会直接执行fullScreen函数,这段代码相当于如下两行:
    *var temp=fullScreen(1); 
    *document.getElementById("objectid").onclick=temp;
    */
    document.getElementById("objectid").onclick=fullScreen(1);
    /**
    *正确的方式,此时会弹出event对象,但由于object元素不支持事件所以并不响应
    */
    document.getElementById("objectid").onclick=fullScreen;
    结论:在通过对象的属性注册事件函数的时候,表达式的右值必须为一个函数名字即不带括号,并且不可手动传递参数(浏览器会将event对象自动传入或window.event),
    从表达式本身出发我们也能发现,表达式为一个赋值表达式,‘=’的右值是一个指向函数的地址,
    当只写函数名字的时候,此时右值的函数名字相当于一个指针,指向函数体所在的内存地址,等到事件发生时就会调用并执行相应的函数。
    但是当加了括号后,会首先计算右边的函数体,而函数体执行必然会返回一个值(显示的return返回值或undefined),这个值则会作为右值赋值给onclick等类似的属性。
     

    经过测试,在IE下,不管是属性注册事件或者方法注册事件均不能响应。即Object作为一个嵌入对象元素是不支持浏览器中各种事件的,这样做的目的可能是作为一个引用外部资源的元素来说,object本身不具备响应事件的能力,而把这种交互能力给予外部的对象,以避免类似ActiveX这样的控件的行为与object的行为冲突。

    层级显示问题

    然后我想通过透明div覆盖object,给div添加单双击事件,但是发现div无法覆盖,查阅后才知道object似乎拥有很高的层级。

    (疑问2:object作为嵌入对象元素是否在web文档流中?我的猜测:从web历史上来看,web文档最初是用来显示文本的,作为引用外部资源的object元素是不在文档流中的,而且我发现在ie下选取元素的时候是无法选取到object元素的,其他浏览器暂时未测试。)

    从查阅得知iframe的层级高于object,于是便设置div覆盖iframe,iframe覆盖object,从而间接实现div覆盖object。

    虽然覆盖可以实现,但是有一个问题就是当div和iframe都设置透明时,object似乎夹在二者中间被贯穿了,直接一透到底,透明的下面不是object,而是网页的底色。

     1 <div class="wrap2-item-video1">
     2                 <div ondblClick="fullScreen()" style="color:#fff;font-size:12px;position:absolute;background:green;50px;height:50px;top:0;left:0;z-index:9;">
     3                     放大/缩小    
     4                 </div>
     5                 
     6                 <iframe style="background:red;position:absolute;visibility:inherit; top:0px;left:0px;100px;height:100px;z-index:1;"></iframe>
     7                 
     8                 <object classid="clsid:30209FBC-57EB-4F87-BF3E-740E3D8019D2" codebase="" standby="Waiting..."
     9                         id="playOcx" width="100%" height="100%" name="playOcx" align="center">
    10                         <param value="transparent" name="wmode">
    11                 </object>
    12</div>

    如上,div(绿色,zindex:9),iframe(红色,zindex:1),object三者的层级关系。

    修改div的背景,添加边框,修改iframe的背景后,如上,div(红色边框透明,zindex:9),iframe(透明,zindex:1),object三者的层级关系。

     最后:似乎第二种方案并不可行,只能修改成通过不在object元素范围内的元素控制大小的方案,比如在页面里添加个button并绑定事件或者重写控件添加交互事件。

  • 相关阅读:
    vue2.5.2 在ie11打开空白的解决方法
    小程序自定义组件中observer函数的应用
    小程序将一个完整项目导入,报错ENOENT: no such file or directory(game.json)
    企业微信应用开发前准备
    jquery转盘抽奖游戏
    小程序路由跳转携带参数方法(直接跳转、事件委托跳转)
    小程序定义并使用模板template
    小程序真机预览,提示“音乐文件错误,播放失败”
    Java反编译
    DataX
  • 原文地址:https://www.cnblogs.com/luanfujian/p/9324801.html
Copyright © 2020-2023  润新知