个人中心
gpt4 book ai didi

javascript - 一组单选按钮上的 onfocus 事件如何像单个控件一样工作？

转载 作者：可可西里 更新时间：2023-11-01 12:52:34 25 4
gpt4 key购买 nike

考虑以下 HTML 和 JavaScript，它们也在此处:http://jsfiddle.net/5CetH/ 

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
<script type="text/javascript">
  var i=0;

  function _focus() {
    var message = document.getElementById("message");
    message.value = message.value + ++i + ". Focus\r\n";
  }

  function _blur() {
    var message = document.getElementById("message");
    message.value = message.value + ++i + ". Blur\r\n";
  }
  
</script>
</head>
<body>
<div style="background-color: Aqua; width: 100px; height: 50px" onfocus="_focus()" onblur="_blur()" tabindex="0">
  <input name="rb" type="radio" /><br />
  <input name="rb" type="radio" />
</div>
<br />
<textarea id="message" rows="15" cols="50"></textarea>
</body>
</html>

我想要的行为如下:

  • 当第一次点击 aqua div 区域的任何地方时(无论是否点击单选按钮)，onfocus 事件应该被触发。
  • 当点击 aqua div 后，点击其他地方时，应该触发 onblur 事件。
  • 只要在 aqua div 区域内的任何地方点击一次以上，就不应触发任何事件，即使是从一个单选按钮点击到另一个单选按钮也是如此。

它似乎在 Chrome 中运行良好，但在 FireFox 8 或 IE 9 中运行不佳。

关于如何修复我的代码以使其正常工作有什么建议吗？

最佳答案

只能聚焦一些元素，例如<a>和 <input> .对于其他元素，您必须自己实现。

// window.addFocusToElem(elem, callbacks) - returns id for removeFocusFromElem
// window.removeFocusByID(id)
// in IE <= 8 the blur events get fired in the wrong order!
// callbacks: { onFocus: function(e) {}, onBlur: function(e) {} } - both methods are optional
(function() {
    var addEvent, removeEvent;
    (function() {
        // sometimes in IE <= 8 the window.blur event isn't fired when the
        // window loses the focus but instead it is fired when the window gets
        // the focus back again. This requires some hacking - and because
        // 'fireEvent' in window === false it even requires some more hacking.
        var hasFocus = true;
        var queue = [];

        addEvent = function(node, evtType, callback) {
            if('addEventListener' in node)
                node.addEventListener(evtType, callback, false);
            else { // IE <= 8
                if(evtType === 'blur') {
                    queue.push(callback);
                }
                node.attachEvent('on' + evtType, callback);
            }
        }

        removeEvent = function(node, evtType, callback) {
            if('removeEventListener' in node)
                node.removeEventListener(evtType, callback, false);
            else { // IE <= 8
                if(evtType === 'blur') {
                    var length = queue.length;
                    while(length--) {
                        if(callback === queue[ length ]) {
                            queue.splice(length, 1);
                            break;
                        }
                    }
                }
                node.detachEvent('on' + evtType, callback);
            }
        }

        // IE <= 8
        if('documentMode' in document && document.documentMode <= 8) {
            setInterval(function() {
                if(!document.hasFocus() && hasFocus) {
                    hasFocus = false;
                    for(var o in queue) {
                        queue[ o ](document.createEventObject());
                    }
                }
            }, 100);
            addEvent(window, 'focus', function(e) {hasFocus = true;});
        }
    })();

    function doClick(node, evtType) {
        if('click' in node) { // most Browser (HTML-DOM)
            node.click();
        } else if('createEvent' in document) { // at least Chrome (16)
            var e = document.createEvent('MouseEvents');
            e.initEvent('click', true, true);
            node.dispatchEvent(e);
        } else {

        }
    }

    var id = 0;
    var queue = [];

    window.addFocusToElem = function addFocusToElem(elem, callbacks) {
        var _id = id++;
        var entry = queue[ _id ] = {
            elem: elem,
            onFocus: function(e) {
                removeEvent(entry.elem, 'click', entry.onFocus);
                addEvent(document, 'click', entry.onBlur);
                if('onFocus' in callbacks &&
                   typeof callbacks.onFocus === 'function') {
                    callbacks.onFocus(e);
                }
            },
            onBlur: function(e) {
                var node = 'target' in e ? e.target : e.srcElement;
                while(node) {
                    if(node === entry.elem) {
                        break;
                    }
                    node = node.parentNode;
                }
                if(!node) {
                    removeEvent(document, 'click', entry.onBlur);
                    addEvent(area, 'click', entry.onFocus);
                    if('onBlur' in callbacks &&
                       typeof callbacks.onBlur === 'function') {
                        callbacks.onBlur(e);
                    }
                }
            }
        };
        addEvent(elem, 'click', entry.onFocus);
        addEvent(window, 'blur', function(e) {
            doClick(elem.parentNode);
        });
        addEvent(document, 'keyup', function(e) {
            if(e.keyCode === 9) { // tab
                var node = 'target' in e ? e.target : e.srcElement;
                while(node) {
                    if(node === elem) {
                        doClick(elem);
                        break;
                    }
                    node = node.parentNode;
                }
                if(!node) {
                    doClick(elem.parentNode);
                }
            }
        });
        return _id;
    };
    window.removeFocusByID = function removeFocusByID(id) {
        if(id in queue) {
            var entry = queue[ id ];
            removeEvent(entry.elem, 'click', entry.onFocus);
            removeEvent(document, 'click', entry.onBlur);
            delete queue[ id ];
            return true;
        }
        return false;
    };
})();

用法:

<div style="background-color: Aqua; width: 100px; height: 50px" id='area'>
    <input name="rb" type="radio">Foo<br>
    <input name="rb" type="radio">Bar
</div>
<script type='text/javascript'>
var id = addFocusToElem(document.getElementById('area'), {
    onFocus: function(e) {
        // statements
    },
    onBlur: function(e) {
        // statements
    }
});
// removeFocusByID(id);
</script>

jsFiddle

关于javascript - 一组单选按钮上的 onfocus 事件如何像单个控件一样工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8579632/

25 4 0
文章推荐： javascript - Addthis/Sharethis VS 添加每个按钮 "manually"
文章推荐： jquery - 通过 jQuery 创建的 Textarea - 但不可编辑，为什么？
文章推荐： php - 从 PHP CLI 脚本运行命令之前导出 shell 环境变量
文章推荐： html - html 5 中的视频播放质量
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com