IE 8及以下不触发点击具有显示的元素：none;任何解决方法？ [英] IE 8 and below not triggering click on elements which have display: none; Any workaround?

问题描述

问题出在Internet Explorer 8及以下版本。找到了一个体面的工作解决方案。

Internet Explorer 8和下面没有触发 click（）事件通过jQuery设置（或者甚至可能是inline，不确定）在< input / c $ c>元素，其具有CSS属性， display 设置为 none 。它适用于Internet Explorer 9，Mozilla Firefox和Google Chrome。奇怪的。

上下文

要被点击的输入 c>被赋予样式 display：none; 。并且该函数在输入的单击事件中给出。由于整个内容在标签内，它会触发输入点击 / code>当标签单击。你可以把它作为某种漂亮的选择器，隐藏输入。

标签默认将事件传递到第一个输入我想在这里使用它。我不想让用户在这里看到丑陋的输入。预期的浏览器行为，但无效。

HTML

  ul> 
< li> 
< label> 
< input type =buttonvalue =Button 1/> 
你好！这是列表项＃1。 
< / label> 
< / li> 
< li> 
< label> 
< input type =buttonvalue =Button 2/> 
你好！这是列表项＃2。 
< / label> 
< / li> 
< li> 
< label> 
< input type =buttonvalue =Button 3/> 
你好！这是列表项＃3。 
< / label> 
< / li> 
< / ul> 
  

导致问题的精确CSS

  ul li，
 ul li label {display：block; padding：5px;游标：指针;} 
 ul li label input {display：none;} 
 ul li {border-bottom：1px solid #ccc;} 
 ul li：hover {background-color： eee;} 
  

JavaScript

  $（document）.ready（function（）{
 $（input）。 this）.attr（value））; 
}）; 
}）; 
  

小提琴： http://jsfiddle.net/qSYuP/

---

更新＃1：尝试给属性：

 < label for =btn1> 
< input type =buttonvalue =Button 1id =btn1/> 
  

仍然无法运作！

---

更新＃2：试用CSS visibility：hidden; ：

  ul li label input {visibility：hidden;} 
  

。但是，仍然不起作用！

---

更新＃3：试用CSS position：absolute; ：

  ul li label {overflow：hidden;} 
 ul li label input { position：absolute; left：-99em;} 
  

要使用 overflow：hidden; ，请认真对待！

---

＃4：手动触发点击（）函数：

  $文档）.ready（function（）{
 $（input）。click（function（）{
 console.log（Hey you！ ））; 
}）; 
 $（label）click（function（）{
 $（this）.find（input）。 b}）; 
}）; 
  

好吧，IE 8打印后会堆叠出来 LOG：嘿！ 1209 次

 按钮3 按钮3 
日志：嘿，你！按钮3 
日志：嘿，你！按钮3 
日志：嘿，你！按钮3 
日志：嘿，你！按钮3 
 SCRIPT28：超出堆栈空间
  

无限期工作应该是我的脚本的问题！

---

解决方案： >

因为它是因为支持 opacity 的I​​E 8，我不得不使用 display：inline- block; with opacity：0; 。

  ul li label input {
 opacity：0; 
 width：0px; 
 height：0px; 
 display：inline-block; 
 padding：0; 
 margin：0; 
 border：0; 
} 
  

现在输入的盒子是隐藏的，字面上。此修复程序仅适用于IE 8！

无法使用 IE 8和更低版本修复：

  ul li标签输入{
 opacity：0 \9; 
 width：0px\9; 
 height：0px\9; 
 display：inline-block\9; 
 padding：0 \9; 
 margin：0\9; 
 border：0\9; 
} 
  

小提琴：http://jsfiddle.net/VSQbD/

解决方案

我认为这很简单。你只需要在可见的项目上使用点击处理程序。如果您希望点击< label> 或< li> $ c>< input> 对象是隐藏的，你希望它在所有浏览器中工作，那么你只需要在< label> / code>或< li> ，因为这是一个可见对象，当< input& code>已隐藏。

The issue is with Internet Explorer 8 and below. Have found a decent working solution.

Issue

Internet Explorer 8 and below is not triggering click() event set by jQuery (or even may be inline, not sure) on <input /> elements, which have CSS property, display set to none. It works in Internet Explorer 9, Mozilla Firefox, and Google Chrome. Weird. This is how the code is and is there any work-around for Internet Explorer 8 and below?

Context

The input to be clicked is given a style display: none;. And the function is given in the click event of the input. Since the whole stuff is inside the label, it triggers the click event on the input when the label clicked. You can take this as some kind of pretty selector, hiding the input.

The label implicitly transfers the click event to the first input by default, and that is what I wanna use it here. I don't want the users to see the ugly input here. Expected browser behaviour, but not working.

HTML

<ul>
    <li>
        <label>
            <input type="button" value="Button 1" />
            Hello! This is a list item #1.
        </label>
    </li>
    <li>
        <label>
            <input type="button" value="Button 2" />
            Hello! This is a list item #2.
        </label>
    </li>
    <li>
        <label>
            <input type="button" value="Button 3" />
            Hello! This is a list item #3.
        </label>
    </li>
</ul>​

The Exact CSS which caused the Issue

ul li,
ul li label {display: block; padding: 5px; cursor: pointer;}
ul li label input {display: none;}
ul li {border-bottom: 1px solid #ccc;}
ul li:hover {background-color: #eee;}​

JavaScript

$(document).ready(function(){
    $("input").click(function(){
        alert("Hey you! " + $(this).attr("value"));
    });
});​

Fiddle: http://jsfiddle.net/qSYuP/

---

Update #1: Tried giving for attribute:

<label for="btn1">
    <input type="button" value="Button 1" id="btn1" />

Still doesn't work!

---

Update #2: Tried CSS visibility: hidden;:

ul li label input {visibility: hidden;}

Breaks layout. But, still doesn't work!

---

Update #3: Tried CSS position: absolute;:

ul li label {overflow: hidden;}
ul li label input {position: absolute; left: -99em;}

Works! I am not in a position to use overflow: hidden;, seriously caught!

---

Update #4: Manually triggering the click() function:

$(document).ready(function(){
    $("input").click(function(){
        console.log("Hey you! " + $(this).attr("value"));
    });
    $("label").click(function(){
        $(this).find("input").click();
    });
});

Well, IE 8 goes out of stack after printing LOG: Hey you! Button 3 for 1209 times!

LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
LOG: Hey you! Button 3 
SCRIPT28: Out of stack space 

Works Infinitely! Should be an issue with my script!

---

Solution: Kind of crappy fix, but did the trick!

Since it is because IE 8, which supports opacity, I had to use display: inline-block; with opacity: 0;.

ul li label input {
    opacity: 0;
    width: 0px;
    height: 0px;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
}

Now the input's box is hidden, literally. This fix is only for IE 8!

Had to fix using the IE 8 and below Hack:

ul li label input {
    opacity: 0\9;
    width: 0px\9;
    height: 0px\9;
    display: inline-block\9;
    padding: 0\9;
    margin: 0\9;
    border: 0\9;
}

Fiddle: http://jsfiddle.net/VSQbD/

解决方案

I think this is pretty straightforward. You just have to use click handlers on visible items. If you want a click on the <label> or the <li> to work when the <input> object is hidden and you want it to work in all browsers, then you just need to put a click handler on either the <label> or the <li> because that is a visible object that will receive the click when the <input> is hidden.

这篇关于IE 8及以下不触发点击具有显示的元素：none;任何解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！