logo标签列表

在 HTML 中将键盘事件附加到 SVG 元素

javascriptsvgdom-events
10

当在浏览器中运行SVG时，是否有任何方法可以将textInput或keypress（或任何其他文本输入）事件附加到SVG元素上？

我可以将事件处理程序附加到document.documentElement，但是无论通过什么机制将事件处理程序附加到任何SVGElement（SVG、g、rect等）都没有任何反应...

从SVG规范中可以看出，这不受支持（W3 SVG事件列表），但是是否有任何浏览器支持任何“额外”功能？

我无法在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", eventHandlerType);
        addEventHandler(svgTarget, "keyup", eventHandlerType);
        addEventHandler(svgTarget, "keydown", eventHandlerType);

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

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

        //We can get a keypress if we attach an event handler to the underlying document Element    
        addEventHandler(document.documentElement, "keypress", 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,0)" id="aRect" focusable="true"/>
    </svg>
</div>
</body>
</html>

如示例所示，我仍然可以在“背景”文档元素上回退到关键事件。有没有任何宠物库、技术可以将其与SVGElement相关联？

注意：我也尝试过tabindex（0）和focus，但没有效果...

在 IE9 下工作，因为 IE9 似乎在矩形上实现了 focusable="true" 属性。（在其周围绘制虚线） - JFK
相关问题：https://dev59.com/YGw15IYBdhLWcg3wO5MH - ARno
4个回答
5
如用户Erik Dahlström所建议，您（首先）需要为焦点添加一个事件监听器。
svgRect.addEventListener('focus', function(){
    this.addEventListener('keypress',function(e){
        console.log(e.keyCode);
    });
}, svgRect);
4
简单的答案可能是这些浏览器不支持'focusable'属性。对于例如<rect>上的键事件监听器，需要在svg内部有一个焦点概念才能有任何意义。
看起来是这样。我试图向浏览器指示我想要SVG Tiny 1.2方法（xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"），但这引起了更多问题。我应该去哪里找到权威答案，证明它不被支持，而我必须自己解决？...我会尝试在Opera中实现... - JFK
据我所知，所有浏览器都会忽略“version”和“baseProfile”属性，但如果Illustrator尝试确保文件符合某个特定的配置文件，则这些属性可能会在创作工具中引起问题。 - Erik Dahlström
如果您使用XHTML，我认为它将像您在Opera中期望的那样工作，或者您可以尝试HTML5 Ragnarök构建- http：//labs.opera.com/news/2011/02/22/. - Erik Dahlström
2

Tudormi的代码很好，但要注意内存泄漏问题，因为每次聚焦于svgRect时，都会在该元素上注册新的keypress事件。

-2

看看Raphael.js。另外，我在使用MooTools方面取得了很大的成功。如果你不想自己编写代码，我相信你可以使用任何JavaScript框架来添加一些事件处理程序。

谢谢，但问题是键盘事件，而不是仅仅附加事件。我认为Moo或Raphael不能直接帮助解决这个问题。我正在使用backbone.js处理其他事件，并且它们可以正常工作，我编写了这个示例来适用于任何框架。 - JFK
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接