javascript-events – 将键盘事件附加到HTML中的SVG元素

无论如何在浏览器中在 HTML中运行SVG时,是否将textInput或keypress(或实际上任何其他文本输入)事件附加到SVG元素？

我可以将一个eventhandler附加到document.documentElement但是当我通过任何机制将一个eventhandler附加到anykind的SVGElement时没有任何反应… svg,g,rect …

我从SVG规范中看到这不支持(W3 SVG list of events),但是任何浏览器都支持任何“额外”吗？

我无法让以下内容在Chrome或Firefox上运行…

<!DOCTYPE HTML>
<html>
<head>
<title>Key event test</title>
<style type="text/css">
body,html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: #f00;
}

#main {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 80%;
    background: #0f0;
    float: right;
}

#drawArea {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: #ffffff;
}

#side {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 20%;
    background: #00f;
    float: left;
}


</style>
<script type="text/javascript">

    function createBoundEventHandler(el,name) {
        var f = 
            function eventHandler(ev) {
    if("mousedown" === ev.type) {
        el.focus();
    }
    else {
        alert("asEventHandler: " + el.localName + " " + name + " " + ev.type);
    }
    return true;
            };
        return f;
    }

    function doEvent(event,elementName,eventName) {
        alert("asAttribute: " + elementName + " " + eventName + " " + event.type);
        return true;
    }

    function addEventHandler(element,eventName,type) {
        var attrName = "on" + eventName;
        var attrValue = "doEvent(evt,'" + element.localName + "','" + eventName + "')";
        if("asAttribute" === type) {
            element.setAttribute( attrName,attrValue);
        }
        else {
            element.addEventListener(eventName,createBoundEventHandler(element,eventName),false);
        }
    }

    window.onload = function() { 
        var eventHandlerType = "asEventHandler"; //asAttribute asEventHandler

        var svgTarget = document.getElementById('drawArea');
        var svgRect = document.getElementById('aRect');
        var nonSVG = document.getElementById('side');

        addEventHandler(svgTarget,"keypress",eventHandlerType);
        addEventHandler(svgTarget,"mousedown","keyup","keydown",eventHandlerType);

        addEventHandler(svgRect,eventHandlerType);
        addEventHandler(svgRect,eventHandlerType);

        addEventHandler(nonSVG,eventHandlerType);
        addEventHandler(nonSVG,eventHandlerType);

        //We can get a keypress if we attach an event handler to the underlying document Element    
        addEventHandler(document.documentElement,eventHandlerType);
    }
</script>
</head>
<body>
    <div id="side" tabindex="0">
    </div>
<div id="main">
    <svg  version="1.1" xmlns="http://www.w3.org/2000/svg" id="drawArea" focusable="true" tabindex="0"> 
    <rect x="0" y="0" width="100" height="100"
            style="fill:yellow; ;stroke-width:2; stroke:rgb(0,0)" id="aRect" focusable="true"/>
    </svg>
</div>
</body>
</html>

如示例所示,我仍然可以回退’background’doc元素上的关键事件.有没有人有任何宠物图书馆,将这种技术与SVGElement相关联的技术.

注：我也试过tabindex(0)并且没有效果……

谢谢…

解决方法

一个简单的答案可能是这些浏览器不支持 ‘focusable’属性.对于关键事件监听器,例如< rect>无论如何,需要在svg中有一个焦点的概念.

javascript-events – 将键盘事件附加到HTML中的SVG元素

解决方法

猜你在找的JavaScript相关文章