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事件效果很好：

Above is onmouseout, below is onmouseover

顶部屏幕截图显示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>标签，但是嘿......它仍然是一个解决方案。

node-webkit <object> onmousedown </object>

实施例

问题

1 个答案: