首页
学习
活动
专区
工具
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,filevalue属性,而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 操作 可以 修改 标签元素 属性 ; 图片标签 <img..., 即可实现批量修改元素属性 ; setAttribute 方法用于 设置指定元素属性值 , 接收 2 个参数 : 第一个参数是要设置属性名称 ; 第二个参数是要设置属性值 ; // 示例...:设置元素 id 属性为 "bt" element.setAttribute('id', 'bt'); getAttribute 方法用于 获取指定元素属性值 , 接收 1 个参数 : 参数是要获取属性名称...1 个参数 : 参数是要移除属性名称 ; // 示例:移除元素 id 属性 element.removeAttribute('id'); 代码示例 : // 设置属性 element.setAttribute

    14410

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

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

    32620

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

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

    7.2K60

    JavaScript DOM基础

    ('box').getAttribute('className');//非IE不支持 PS:HTML通用属性style和onclickIE7更低版本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.1K30

    原生 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 表示子级

    10210

    调试用到几种断点

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

    1.3K10

    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

    从零开始学 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.1K30

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

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

    96190
    领券