javascript - node-webkit <object> onmousedown

Question

我有一个带有标题栏的无框窗口，其设置与 node-webkit sample apps 中的非常相似(也就是说，带有 -webkit-app-region: no-drag; 的按钮，以便它们接受用户输入)。

因为我希望我的应用程序完全可主题化，所以我决定将最小化/最大化/关闭按钮实现为 SVG 并通过 JavaScript 控制它们的颜色/不透明度。

例子

例如，我有以下关闭按钮 close.svg :

<svg class="close-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="26">
    <g>
        <title>Close</title>
        <path class="close-icon-bg" fill="#c8c8c8" d="M0 0h30v26h-30z"/>
        <path class="close-icon-fg" d="M11.766 8l-1.766 1.766 3.221 3.221-3.221 3.247 1.766 1.766 3.221-3.247 3.247 3.247 1.766-1.766-3.247-3.247 3.247-3.221-1.766-1.766-3.247 3.221-3.221-3.221z"/>
    </g>
</svg>

然后我的标题栏 div 中有以下内容:

<object id="close-btn" data="img/close.svg" type="image/svg+xml"></object>

然后在 JavaScript 中我有以下内容:

function refreshTheme(theme) {

    var but2 = {
        "default": {
            "bg": {"color": "#000000", "opacity": "0.0"},
            "fg": {"color": "#000000", "opacity": "0.2"}
        },
        "hover": {
            "bg": {"color": "#ac4142", "opacity": "1.0"},
            "fg": {"color": "#e0e0e0", "opacity": "1.0"}
        },
        "click": {
            "bg": {"color": "#000000", "opacity": "1.0"},
            "fg": {"color": "#e0e0e0", "opacity": "1.0"}
        }
    };

    createButton("close", but2, dummy);
}

function createButton(name, theme, func) {
    var svgobj = document.getElementById(name + "-btn"), svg = svgobj.contentDocument;

    styleIcon(svg, name, theme.default);

    svgobj.onmouseover = function() {
        styleIcon(svg, name, theme.hover);
    };

    svgobj.onmouseout = function() {
        styleIcon(svg, name, theme.default);
    };

    svgobj.onmousedown = function() {
        styleIcon(svg, name, theme.click);
    };

    svgobj.onclick = function() {
        func();
    };
}

function styleIcon(icon, name, theme) {
    var bg = icon.getElementsByClassName(name + "-icon-bg")[0];
    bg.setAttribute("fill", theme.bg.color);
    bg.setAttribute("fill-opacity", theme.bg.opacity);

    var fg = icon.getElementsByClassName(name + "-icon-fg")[0];
    fg.setAttribute("fill", theme.fg.color);
    fg.setAttribute("fill-opacity", theme.fg.opacity);
}

基本上发生的是，我有一个硬编码的 JSON 对象 but2封装按钮状态，我将其传递给 createButton() ，它负责设置各种鼠标事件。我可以确认 onmouseover和 onmouseout事件运作良好:

顶部截图显示onmouseout , 底部 onmouseover .

问题

什么不工作是onmousedown和 onclick事件!它们似乎在调试窗口中设置正确，并且控制台中没有出现错误，但它们从未被触发。

我的印象是<object>标签接受所有标准的 HTML 事件，所以这应该可以工作。有什么我想念的吗？可能有一些 node-webkit 警告？与 SVG 有什么关系？

我怎样才能得到 onmousedown和 onclick事件正确触发？

Answer 1

事实证明这是浏览器中 SVG 的实际问题。解决方案，如前所述here , 是让 SVG 在跨越整个图像的透明 ( fill-opacity="0.0" ) 矩形中保持鼠标上/下/单击事件。

就我而言，解决方案是:

var svg_click = svg.getElementsByClassName(name + "-icon-click")[0];

svg_click.onmousedown = function() {
    styleIcon(svg, name, theme.click);
};

// etc...

我对它不是很满意，考虑到它也应该从 <object> 开始工作标记，但是嘿......它仍然是一个解决方案。