javascript - 无法获取未定义或空引用的属性 'classList' - 在第一次鼠标单击时

Question

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

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

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

$(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;
}

到目前为止一切正常，点击已触发。 现在如果点击一个元素，该元素应该选择类并且类预览应该被删除，所以 stroke-width 由类样式改变:

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>

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

Answer 1

不，

this

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

现在我已经更改了 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");