Fatal编程技术网
  • javascript/
  • Javascript OnMouseOver和Out禁用/重新启用项目问题

Javascript OnMouseOver和Out禁用/重新启用项目问题

javascript events

Javascript OnMouseOver和Out禁用/重新启用项目问题,javascript,events,Javascript,Events,我想有一些单选按钮，当鼠标过去时禁用，当它出去时再次启用（只是为了好玩） 当鼠标在上面移动时，它会做它应该做的事情。当鼠标后退时，按钮不会重新启用。另外，如何将其设置为默认启用状态，以便在刷新页面时不会保持禁用状态 提前谢谢。我也遇到过类似的问题，我想让一张图片曝光，然后在鼠标离开图片时进行常规操作。我使用jQuery并最终连接到mouseenter和mouseout，而不是您正在使用的事件。你可能想试试这些 $('#rigged').mouseenter(function() {

我想有一些单选按钮，当鼠标过去时禁用，当它出去时再次启用（只是为了好玩）
当鼠标在上面移动时，它会做它应该做的事情。当鼠标后退时，按钮不会重新启用。另外，如何将其设置为默认启用状态，以便在刷新页面时不会保持禁用状态

提前谢谢。

我也遇到过类似的问题，我想让一张图片曝光，然后在鼠标离开图片时进行常规操作。我使用jQuery并最终连接到mouseenter和mouseout，而不是您正在使用的事件。你可能想试试这些

$('#rigged').mouseenter(function() {
    $(this).disabled = true;
  }).mouseout(function() {
    $(this).disabled = false;
  });
差不多吧

同样，这是在使用jQuery

（您必须给输入单选按钮id“rigged”）

您可以通过将单选按钮包装在div标记中并设置onmouseover和onmouseout事件来实现相同的效果

<div id="container" onmouseout="this.disabled=false" onmouseover="this.disabled=true">
    <input name="rigged" type="radio">
</div>
上述解决方案仅适用于IE，对于适用于FireFox的解决方案，请执行以下操作

<script type="text/javascript">
    function toggleDisabled(el) {
        try {
            el.disabled = el.disabled ? false : true;
        }
        catch(E){
        }
        if (el.childNodes && el.childNodes.length > 0) {
            for (var x = 0; x < el.childNodes.length; x++) {
                toggleDisabled(el.childNodes[x]);
            }
        }
     }
</script>


功能切换禁用（el）{
试一试{
el.disabled=el.disabled？假：真；
}
捕获（E）{
}
如果（el.childNodes&&el.childNodes.length>0）{
对于（var x=0；x
*此javaScript函数是从这里借用的：

我认为当它被禁用时，它不会触发任何事件。 你可以试试看

  • 在鼠标悬停时，将一个不可见的div覆盖在收音机盒上。这将使它无法使用。然后在这个不可见div的鼠标上，移除div

  • 你可以玩鼠标x和y坐标，看看它们是否覆盖了你的无线电元素。但这并不是一个最佳的解决方案

在jQuery中，第一个标记是这样的

$('#rigged').after('<div id="overlay" style="display: none;"></div>'); // make this the size of the radio button and/or associated label (if present). also, maybe with absolute and relative positioning, make sure it will overlap the radio element

$('#rigged').bind('mouseover', function() {

    $('#overlay').show();

});

$('#overlay').live('mouseout', function() {
    $(this).hide();
});

$（'#rigged'）。在（''）//使其成为单选按钮和/或相关标签（如果存在）的大小。此外，可能使用绝对和相对定位，确保其与无线电元素重叠
$（'#rigged'）.bind（'mouseover'，function（）{
$（“#覆盖”）.show（）；
});
$（'#overlay'）.live（'mouseout'，function（）{
$（this.hide（）；
});
您需要对此进行调整，以处理多个元素。

输入不会触发mouseout事件，因为它们被禁用

所以你必须把它包装在一个div中，并捕捉div的事件

如果您想要纯javascript，请使用Phaedrus的示例“toggleDisabled”脚本

如果您想要jQuery而不是新手友好型：

<html>
<head>
   <title>Page</title>  
   <script src="jquery-1.3.2.min.js"></script>
   <script>
       $(function() {
           function toggleDisabled(d) {
               var disable = d;
               this.disableChildren = function() { $(this).children().each(function() { this.disabled = d; }); }
           }
           $("form .radios").hover(new toggleDisabled(true).disableChildren, new toggleDisabled(false).disableChildren);
       });
   </script>
</head>
   <body>
        <form>
           <div class="radios">
               <input type="radio" name="rigged" value="1"/> Item One<br />
               <input type="radio" name="rigged" value="2"/> Item Two<br />
               <input type="radio" name="rigged" value="3"/> Item Three<br />
               <input type="radio" name="rigged" value="4"/> Item Four
            </div>
        </form>      
   </body>
</html>


页
$（函数（）{
功能切换禁用（d）{
var=d；
this.disableChildren=function（）{$（this.children（）.each（function（）{this.disabled=d；}）；}
}
$（“form.radios”）.hover（新切换禁用（true）.disableChildren，新切换禁用（false）.disableChildren）；
});
第一项

第二项

第三项

项目四
不知道您可以“禁用”一个div.+1是的，您的顶级示例/代码不起作用（至少跨浏览器），因此您应该删除它并使用脚本。为什么
新切换被禁用
？为什么不把它包装成一个闭包：
function-toggleDisabled（d）{return function（）{$（this）.children（）.each（function（）{this.disabled=d；}）}
$('#rigged').after('<div id="overlay" style="display: none;"></div>'); // make this the size of the radio button and/or associated label (if present). also, maybe with absolute and relative positioning, make sure it will overlap the radio element

$('#rigged').bind('mouseover', function() {

    $('#overlay').show();

});

$('#overlay').live('mouseout', function() {
    $(this).hide();
});

<html>
<head>
   <title>Page</title>  
   <script src="jquery-1.3.2.min.js"></script>
   <script>
       $(function() {
           function toggleDisabled(d) {
               var disable = d;
               this.disableChildren = function() { $(this).children().each(function() { this.disabled = d; }); }
           }
           $("form .radios").hover(new toggleDisabled(true).disableChildren, new toggleDisabled(false).disableChildren);
       });
   </script>
</head>
   <body>
        <form>
           <div class="radios">
               <input type="radio" name="rigged" value="1"/> Item One<br />
               <input type="radio" name="rigged" value="2"/> Item Two<br />
               <input type="radio" name="rigged" value="3"/> Item Three<br />
               <input type="radio" name="rigged" value="4"/> Item Four
            </div>
        </form>      
   </body>
</html>