node-webkit <object> onmousedown答案

【问题标题】：node-webkit <object> onmousedownnode-webkit <object> onmousedown
【发布时间】：2014-02-15 02:17:04
【问题描述】：

我有一个带有标题栏的无框窗口，与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 事件正确触发？

【问题讨论】：

你能提供一个关于jsfiddle的demo吗？
@IrvinDomininakaEdward 这可以在 jsfiddle 中使用吗？我尝试在本地编辑（即不在 node-webkit 中），但 Chrome 在 svg = svgobj.contentDocument; 部分抱怨，因为我要跨文档。但可以肯定的是，我会设置一个
@IrvinDomininakaEdward 在 jsfiddle 中似乎根本不起作用，但您可以使用它：jsfiddle.net/Ff6pa

标签： javascript svg node-webkit

【解决方案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> 标记上工作，但是嘿……它仍然是一个解决方案。

【讨论】：