Javascript 将键盘事件附加到HTML中的SVG元素_Javascript_Svg_Dom Events

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

javascript svg

Javascript 将键盘事件附加到HTML中的SVG元素,javascript,svg,dom-events,Javascript,Svg,Dom Events,在浏览器中的HTML中运行SVG时，是否有必要将textInput或keypress（或任何其他文本输入）事件附加到SVG元素我可以将eventhandler附加到document.documentElement，但当我通过任何机制将eventhandler附加到任何类型的SVGElement时，都不会发生任何事情。。。SVG，g，rect 我从SVG规范中看到，这是不受支持的（），但是有任何浏览器支持任何“附加”吗我无法在Chrome或Firefox上运行以下内容 <!DOCTYPE

在浏览器中的HTML中运行SVG时，是否有必要将textInput或keypress（或任何其他文本输入）事件附加到SVG元素

我可以将eventhandler附加到document.documentElement，但当我通过任何机制将eventhandler附加到任何类型的SVGElement时，都不会发生任何事情。。。SVG，g，rect

我从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>


关键事件测试
正文，html{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
背景：#f00；
}
#主要{
保证金：0；
填充：0；
身高：100%；
宽度：80%；
背景：#0f0；
浮动：对；
}
#绘图区{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
背景：#ffffff；
}
#侧面{
保证金：0；
填充：0；
身高：100%；
宽度：20%；
背景：#00f；
浮动：左；
}
函数createBoundEventHandler（el，名称）{
变量f=
函数eventHandler（ev）{
如果（“鼠标向下”==ev.type）{
el.focus（）；
}
否则{
警报（“asEventHandler:+el.localName+”“+name+”“+ev.type”）；
}
返回true；
};
返回f；
}
函数doEvent（事件、元素名称、事件名称）{
警报（“asAttribute:”+elementName+“”+eventName+“”+event.type）；
返回true；
}
函数addEventHandler（元素、事件名、类型）{
var attrName=“on”+eventName；
var attrValue=“doEvent（evt，”+element.localName+”，“+eventName+”）”；
如果（“asAttribute”==类型）{
setAttribute（attrName，attrValue）；
}
否则{
addEventListener（eventName，CreateBundEventHandler（element，eventName），false）；
}
}
window.onload=函数（）{
var eventHandlerType=“asEventHandler”；//asAttribute asEventHandler
var svgTarget=document.getElementById（'drawArea'）；
var svgRect=document.getElementById（'aRect'）；
var nonSVG=document.getElementById（'side'）；
addEventHandler（svgTarget，“按键”，eventHandlerType）；
addEventHandler（svgTarget，“鼠标向下”，eventHandlerType）；
addEventHandler（svgTarget，“keyup”，eventHandlerType）；
addEventHandler（svgTarget，“keydown”，eventHandlerType）；
addEventHandler（svgRect，“按键”，eventHandlerType）；
addEventHandler（svgRect，“mousedown”，eventhandler类型）；
addEventHandler（svgRect，“keyup”，eventhandler类型）；
addEventHandler（svgRect，“keydown”，eventHandlerType）；
addEventHandler（非VG，“按键”，eventHandlerType）；
addEventHandler（非VG，“鼠标向下”，eventHandlerType）；
addEventHandler（非VG，“键控”，eventHandlerType）；
addEventHandler（非VG，“键控”，eventHandlerType）；
//如果将事件处理程序附加到底层文档元素，则可以获得一个按键
addEventHandler（document.documentElement，“按键”，eventHandlerType）；
}

如示例所示，我仍然可以回退“background”doc元素上的关键事件。有没有人有任何宠物库，有没有把它和一个SVGElement联系起来的技巧

注意，我也尝试了tabindex（0）和focus，但没有效果…

请检查。而且，我在使用方面也取得了很多成功。我相信，如果您不想使用自己的JavaScript框架，您可能可以在任何JavaScript框架中添加一些事件处理程序。

一个简单的答案可能是这些浏览器不支持该属性。对于例如

上的关键事件侦听器，要想有意义，svg中需要有焦点的概念。

正如用户Erik Dahlström所建议的，您（首先）需要为焦点添加事件侦听器

svgRect.addEventListener('focus', function(){
    this.addEventListener('keypress',function(e){
        console.log(e.keyCode);
    });
}, svgRect);

Tudomi的代码工作正常，但要小心memmoryleaks，因为每次关注Sgrect时，新的按键事件都会在该元素上注册。

谢谢，但问题是关键事件，而不是附加事件本身。我不认为穆奥或拉斐尔能直接帮上忙。我在其他事件中使用backbone.js，对它们来说效果很好，我编写的示例是框架无关的，看起来肯定是这样。我试图向浏览器表明我想要SVG Tiny 1.2方法（xmlns=”“version=“1.2”baseProfile=“Tiny”），但这带来的问题比解决的问题还多。我应该到谁/哪里去得到一个明确的答案——它不受支持——我必须自己去做？。。。我将在Opera中试用……AFAIK中的所有浏览器都会忽略“version”和“baseProfile”属性，但如果Illustrator试图确保文件符合某些特定的配置文件，它们可能会在创作工具（如Illustrator）时造成麻烦。如果改用XHTML，它将在Opera中正常工作，或者您可以尝试HTML5 Ragnarök版本-。在IE9下工作，因为IE9似乎在rect上实现了focusable=“true”属性。（在其周围画一条虚线）