javascript - 为什么光标、不透明度属性和 onclick 事件处理程序在 IE9 上不起作用

标签 javascript jquery html css internet-explorer-9

我想在图像中创建一个部分,当我点击它时,它会提醒 hi。我知道有很多方法可以在图像上创建部分,但我想要这样。不透明度属性和光标属性似乎在 IE9 上不起作用,因为当我将鼠标悬停在该区域上时它不显示指针光标并且当我单击该部分时它也不会提醒您。但这在其他浏览器上工作正常。谁能解释为什么会这样?

$(window).load(function () {
  var myImg = document.getElementById("myImg");
  var myDiv = document.createElement("div");
  myDiv.style.position = "absolute";
  myDiv.style.width = "200px";
  myDiv.style.height = "200px";
  myDiv.style.top = "20px";
  myDiv.style.left = "20px";
  myDiv.style.position = "absolute";
  myDiv.style.cursor = "pointer";
  myDiv.style.border = "2px solid red";
  myDiv.style.opacity = 0.3;
  document.body.appendChild(myDiv);
  myDiv.onclick = function () {
    alert("hi");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<img id="myImg" src="http://myartzine.com/wp-content/uploads/2013/10/Gtelaviv_05.jpg">

最佳答案

对于游标,我必须告诉你,唯一的跨浏览器语法是:

element {
    cursor: pointer;
    cursor: hand;
}

还有一些关于游标的更多信息:

In the past the hand value was Microsoft's way of saying pointer; and IE 5.0 and 5.5 only support hand. Because it's the cursor value that's used most often, most other browsers have also implemented hand.

Since IE 6 and 7 support pointer, there's no more reason to use hand, except when older IEs are part of your target audience.

对于 Opacity ,IE 9 接受

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

检查 http://css-tricks.com/css-transparency-settings-for-all-broswers/

我认为对于 onClick 事件处理程序,

By default in IE9, Internet Options > Security Tab > Internet > Custom Level, scroll down to the Scripting section (near the bottom) and in Active Scripting is disabled, so put a check mark against Enable. And, this resolves the problem and the onclick works!!.

关于javascript - 为什么光标、不透明度属性和 onclick 事件处理程序在 IE9 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25934399/

相关文章:

javascript - 如何使用 html css javascript 创建包含文本的字母形状?

html - 带有不透明度的包装器并在没有不透明度的情况下在此包装器上设置 div

javascript - 等待函数完成,然后返回一个值

javascript - 在 ASP.NET 中运行时更改表单 ID 和表单操作

javascript - 在元素悬停时播放 bxSlider

javascript - 带有文本的可折叠移动旁边的按钮应该在底部

html - 为什么悬停样式在应用于我的 div 时不起作用?

html - 如何让 TABLE 增长到与其容器相同的高度? (或者,与 IE JavaScript 缓慢作斗争)

javascript - Jquery UI Resizable with box-sizing : "border-box" issue

javascript - 登录是否存在检查 Angular JS