时间戳

首页 > 解决方案 > 无法获取未定义或空引用的属性“classList” - 在第一次 MouseClick

javascript - 无法获取未定义或空引用的属性“classList” - 在第一次 MouseClick

问题描述

我只是想编写一个 svg 编辑器，当然我有一些事件。

我的实际问题属于更改 svg 元素的类列表，单击它时，将其标记为选中，并带有一些 css 样式。

因此，从数据库中加载的每个符号都会获得可拖动和预览的类以及在鼠标单击时触发的事件监听器。

$(document).ready(function () {
...some code...

addSymbolMouseEvents(document.getElementsByClassName('draggable'));
}

function addSymbolMouseEvents(svgSymbols) {
    for (var i = 0; i < svgSymbols.length; i++) {
        svgSymbols[i].addEventListener('mouseenter', symbolMouseEnter);
        svgSymbols[i].addEventListener('mouseover', symbolMouseOver);
        svgSymbols[i].addEventListener('mouseout', symbolMouseOut);
        svgSymbols[i].addEventListener('click', symbolClick);
        svgSymbols[i].addEventListener('dblclick', symbolDblClick);
        svgSymbols[i].addEventListener('contextmenu', symbolRightClick);
    }
    return svgSymbols;
}

到目前为止它有效，点击被触发。现在，如果单击一个元素，该元素应该选择类并且应该删除类预览，因此笔划宽度由类样式更改：

function symbolClick(evt) {
    //deselect all symbols
    var selectableSymbols = document.getElementsByClassName('selected');
    for (var i = 0; i < selectableSymbols.length; i++) {
        selectableSymbols[i].classList.remove("selected");
        selectableSymbols[i].classList.add("preview");
    }

    //select the firing symbol
    this.classList.add("selected");
    this.classList.remove("preview");
}
<style type="text/css">
    svg {
        border: 1px dotted #808080;
        width: 100%;
        height: 500px;
        background: #fafafa;
    }

    .selected {
        stroke-width: 1;
        opacity: 1;
        stroke: #0026ff
    }

    .draggable {
        cursor: grab;
        /*stroke-width: 0.8;
        stroke: #000000;
        opacity: 0.8;*/
    }

    .preview {
        cursor: grab;
        stroke-width: 0.8;
        stroke: #000000;
        opacity: 0.8;
    }

    .mouseovereffect {
        opacity: 1;
        stroke-width: 1;
    }

</style>

我不知道为什么，但我只能在第二次点击时运行它。在第一次单击时，每个预览样式都会被删除，而在第二次单击时，选定的样式会被设置。有没有更简单的方法来突出显示选定的符号？

标签： javascripthtmlcssasp.net-mvc

解决方案

不，

这个

我认为是指触发事件的符号。

现在我改变了css样式的顺序，所以我不必删除预览类。实际上它是这样工作的：

//remove al selected-classes
var selectableSymbols = document.getElementsByClassName('selected');
    for (var i = 0; i < selectableSymbols.length; i++) {
        selectableSymbols[i].classList.remove("selected");
    }
//add new selected
this.classList.add("selected");

推荐阅读