首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么使用setAttribute设置的onclick属性无法在IE中工作?

在 Internet Explorer (IE) 中,使用 setAttribute 设置 onclick 属性可能会遇到兼容性问题。这是因为 IE 对于事件处理程序的处理方式与其他现代浏览器不同。为了解决这个问题,可以使用以下方法:

  1. 使用 element.onclick 而不是 setAttribute

使用 JavaScript 直接设置元素的 onclick 属性,而不是使用 setAttribute。例如:

代码语言:javascript
复制

element.onclick = function() {

代码语言:txt
复制
 // 你的代码

};

代码语言:txt
复制
  1. 使用 attachEvent

对于 IE 浏览器,可以使用 attachEvent 方法来添加事件处理程序。例如:

代码语言:javascript
复制

element.attachEvent('onclick', function() {

代码语言:txt
复制
 // 你的代码

});

代码语言:txt
复制
  1. 使用 addEventListenerattachEvent 进行兼容性处理:

使用 addEventListener 方法为元素添加事件处理程序,同时考虑到 IE 浏览器的兼容性问题。例如:

代码语言:javascript
复制

function addEvent(element, event, handler) {

代码语言:txt
复制
 if (element.addEventListener) {
代码语言:txt
复制
   element.addEventListener(event, handler, false);
代码语言:txt
复制
 } else if (element.attachEvent) {
代码语言:txt
复制
   element.attachEvent('on' + event, handler);
代码语言:txt
复制
 }

}

addEvent(element, 'click', function() {

代码语言:txt
复制
 // 你的代码

});

代码语言:txt
复制
  1. 使用库或框架:

使用诸如 jQuery 之类的库或框架可以简化事件处理程序的添加,并自动处理浏览器之间的兼容性问题。例如:

代码语言:javascript
复制

$(element).click(function() {

代码语言:txt
复制
 // 你的代码

});

代码语言:txt
复制

通过使用上述方法,可以确保在 IE 浏览器中使用 setAttribute 设置 onclick 属性时能够正常工作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS魔法堂:属性、特性,傻傻分不清楚

name 和nodeName一致 value 和nodeValue一致 textContent 设置或返回属性的文本内容 specified 用于判断属性值是否为自定义值,true表示是在文档中自定义设置的...通过setAttribute设置的无效样式规则属性值 点方式 空字符串 null IE9 setAttribute 空字符串 空字符串 点方式 空字符串 空字符串 IE8,10,11 setAttribute...空字符串 空字符串     注意:IE8—11下,当通过setAttribute设置异常的样式规则时,html标签中的style属性会被删除,因此无法通过outerHTML来萃取异常样式规则的字符串值...无法通过delete操作删除固有属性,在IE5.5、6、7中还会抛异常呢!            ②. 固有属性为只读属性,无法修改。   ...,为什么会获取其下id或name属性值匹配的表单元素呢?

1.8K70
  • html标签属性(attribute)和dom元素的属性(property)

    ,   它们按照规范在html文档上设置这样的自定义属性,并不修改dom元素的属性),而在w3c浏览器下可以正确区分他们的异同;   2,在ie6,7,8(Q)下,通过getAttribute和setAttribute...可以访问设置input类型为text,password,file的value属性,而w3c只有   通过对象属性的形式才能设置获取;   3,在ie6,7,8(Q)下,通过setAttribute无法正确设置...;   4,在ie6,7,8(Q)下,通过setAttribute无法正确设置“style”,通过getAttribute(“style”)返回的将不是字符串(DOMString),而是   CSSStyleDeclaration...对象,通过setter(getter)style.cssText兼容;   5,在ie6,7,8(Q)下,无法通过setAttribute设置事件处理程序,setAttribute(‘onclick’,...IE,   使用getAttribute返回的是在html中的路径,而dom对象属性访问返回绝对路径。

    1.9K50

    【Web APIs】JavaScript 操作元素 ② ( 修改元素属性 | 直接访问属性 | 使用setAttribute、getAttribute 和 removeAttribute访问属性 )

    JavaScript 中 可以通过 DOM ( 文档对象模型 ) 操作 来 修改网页的 内容 , 结构 , 样式 , 属性 ; 在 【Web APIs】JavaScript 操作元素 ① ( 修改元素内容...; 本篇博客开始介绍 通过 DOM 操作 修改元素属性 ; 一、修改元素属性 1、修改属性操作简介 在 JavaScript 中 , DOM 操作 可以 修改 标签元素 的 属性 ; 图片标签 属性 ; setAttribute 方法用于 设置指定元素的属性值 , 接收 2 个参数 : 第一个参数是要设置的属性名称 ; 第二个参数是要设置的属性值 ; // 示例...:设置元素的 id 属性为 "bt" element.setAttribute('id', 'bt'); getAttribute 方法用于 获取指定元素的属性值 , 接收 1 个参数 : 参数是要获取的属性名称...1 个参数 : 参数是要移除的属性名称 ; // 示例:移除元素的 id 属性 element.removeAttribute('id'); 代码示例 : // 设置属性 element.setAttribute

    16010

    iOS-UITextField 全面解析iOS中UITextField 使用全面解析UITextField的代理方法通知UITextField 在storyboard 中设置属性

    iOS中UITextField 使用全面解析 建议收藏,用到的时候来这里一查就都明白了 //初始化textfield并设置位置及大小 UITextField *text = [[UITextField...[UIColor redColor]; //输入框中是否有个叉号,在什么时候显示,用于一次性删除输入框中的内容 text.clearButtonMode = UITextFieldViewModeAlways...show]; return NO; } } return YES; } 通知 UITextField派生自UIControl,所以UIControl类中的通知系统在文本字段中也可以使用...中设置属性 ?...2、Placeholder : 可以在文本框中显示灰色的字,用于提示用户应该在这个文本框输入什么内容。当这个文本框中输入了数据时,用于提示的灰色的字将会自动消失。

    7.3K60

    【兼容性】js 浏览器兼容问题处理方式

    "for" 问题描述: 和"float"属性一样,同样需要使用不现的句法区分来访问标签中的"for" 在IE中这样写: var myObject = document.getElementById...= myObject.getAttribute("class"); 另外,在使用setAttribute()设置Class属性的时候,两种浏览器也存在同样的差异。  ...中,按钮没反应,在IE中,就可以,因为对于IE来说,一个HTML 元素的 ID 可以直接在脚本中当作变量名来使用,而Firefox中不可以。...: [object] } 以上代码在IE运行的结果是[object],而在Firefox无法运行。...因为在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口。

    34820

    JavaScript DOM基础

    ('box').getAttribute('className');//非IE不支持 PS:HTML通用属性style和onclick,IE7更低的版本style返回一个对象,onclick返回一个函数式...5.setAttribute()方法 setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数:属性名和值。如果属性本身已存在,那么就会被覆盖。....setAttribute('bbb','ccc');//设置自定义的属性和值 PS:在IE7及更低的版本中,使用setAttribute()方法设置class和style属性是没有效果的,虽然IE8解决了这个...,是无法使用innerHTML这个属性输出文本内容的。...个,非IE7个 PS:在非IE中,标准的DOM具有识别空白文本节点的功能,所以在火狐浏览器是7个,而IE自动忽略了,如果要保持一致的子元素节点,需要手工忽略掉它。

    1.4K90

    Javascript DOM(一)

    获取属性值 element.属性 只能获取内置属性值,无法获取自定义属性值,如index、data-index等,其中data-*是H5的自定义属性 例子: var div = document.querySelector...第一种方法也无法设置自定义属性值 element.属性 = ‘值’ 例子: var div = document.querySelector("#demo"); div.id = "box"; element.setAttribute...自定义属性目的:为了保存和使用数据。...有些数据可以保存到页面中而不用保存到数据库中。未解:保存到数据库:怎么存?存在哪里怎么看?怎么用?...", "2"); 这里设置为数值时可以不用字符串形式 获取 H5 自定义属性 element.getAttribute(‘属性’);和上面用法一样,不同的只是自定义属性以 data-开头 H5 新增

    1.2K30

    原生 JS DOM 常用操作大全

    DOM中使用Element表示节点:文档中的所有内容,在文档中都是节点(标签、属性、文本注释等)DOM中使用node表示 获取元素 都以 document ....) div.onclick=null; 移除监听事件的方式 (使用匿名函数 ,无法移除 ) div.removeEventListener (type,listener,useCapture);...为什么需要自定义属性:用于在页面中存储数据而不用在数据库中存储 Element.属性 (内置属性通 点的方式 获取元素属性)Element.getAttribute("属性") (一般用于 自定义属性)....属性 获得的是一个以 data- 开头的自定义属性集合 设置H5 自定义属性 H5中规定 自定义属性要 以 data-开头做为属性名并且赋值。...在标签中设置 使用 js设置 Element.setAttribute("data-index",2) 节点操作 node 表示父级 child 表示子级

    10710

    JavaScript进阶内容——DOM详解

    "divv change"; } 自定义属性 首先我们了解一下自定义属性: 并非HTML自带的,但是可以在标签中写入的属性,被称为自定义属性....属性; //获得属性值(可以获得所有属性,包括自定义属性) element.getAttribute('属性'); 然后我们讲一下设置属性值的方法: //注意:下面两种方法中针对class的设置不同...//设置属性值(内置属性) 对象.属性名 = '属性值'; name.className = 'class1'; //设置属性值(所有属性) 对象.setAttribute('属性名','属性值');...e.cancelBubble 该属性阻止冒泡 非标准 ie6~ie8使用 e.returnValue 该属性 阻止默认事件(默认行为)非标准 ie6~ie8使用 比如不让链接跳转 e.preventDefault...= function(e){ // 注意return方法只能在传统方法中使用,在addEventListener中无法使用 return false;

    1.5K20

    调试用到的几种断点

    记录点 断点命中时记录的信息。直接输入的内容会当成字符串来处理,要输入表达式的话,需要用{}包住。 \color{red}{条件节点和记录点不能混合使用,混合使用,记录点会失效。}...4.内联断点 只有当执行到与内联断点关联的行时,才会命中内联断点。(不知道为什么网上都说是列) 把光标移动到要断的位置,然后点击Shift + F9。或者点击运行>新建断点。...但是,也是可以通过VSCode去调试的,只不过需要在Chrome中设置断点。(下面为了方便录屏就不用VSCode来调试了) 1. 事件断点 添加事件断点后,当触发该事件时,就会中断。...DOM断点 DOM断点的设置并不是在Sources面板中,而是在Elements面板中选中DOM元素,右键,选择Break on设置,一共有三种类型。...请求断点 当发送请求的时候中断。如果不输入内容则是所有请求都中断,如果输入内容,则是当url中包含该内容的请求会中断。 请求断点不会考虑请求能不能发送到服务器。而是在发送请求的时候中断。

    1.4K10

    从零开始学 Web 之 DOM(三)innerText与innerHTML、自定义属性

    { console.log(getText(my$("dv"))); }; 1、设置成对标签中文本内容: innerText 属性是 IE8 标准属性,chrome...2、获取成对标签中文本内容: 在 IE8 下使用 textContent 获取成对标签中文本内容,返回值为 undefined。 那么说明,浏览器不支持的属性的类型都为 undefined....("hello")); // world 1、标签中自定义的属性是不能通过DOM对象.属性 的方式获取的,因为这个属性在DOM里面不存在,强行获取只能是 undefined。...2、相应的,设置也是一样的,通过 DOM对象.属性 的方式设置自定义标签,结果设置的只是DOM对象的自定义属性,这个自定义属性不会在标签上显示出来。...设置:通过DOM对象 .setAttibute("自定义属性的名字", "自定义属性的值") 来设置自定义属性。

    1.2K30

    【web必知必会】—— 使用DOM完成属性填充

    前篇已经介绍过了,获取设置元素的属性,可以使用getAttribute()和setAttribute()两个方法:   在showPic()函数中,通过传过来的对象,可以直接调用getAttribute...因此在a标签中,使用onclick事件,即可。   但是onClick事件,是要接收一个bool值,如果是true,则会默认的跳到另一个网页链接;相反,如果是false,则不会产生任何结果。   ...因此在onClick事件中需要如下书写: <a href="images/pig.png" title="I'm pig!"...5 float浮动   如果不设置img的CSS样式,会发现本来我们想要使ul中的li标签水平显示,结果在宽度足够的情况下,img也跟着水平显示了。   这是为什么呢?   ...因此上面的图片布局中,img元素会随着ul中li的float一起浮动显示。   而clear:both则是为了预防float引起的布局错乱,可以使用clear清除布局设置。

    96490
    领券