如何用querySelector选择带href的锚标签？Dropzone点击事件报错求解

这个报错是因为CSS属性选择器的语法要求：当你在选择器中使用包含#这类特殊字符的属性值时，必须用引号把属性值包裹起来。原来的选择器a[href=#new-intervention]不符合规范，所以浏览器无法正确解析。

直接修复方案 #

把选择器里的#new-intervention用单引号或双引号包裹起来即可，修改后的JavaScript代码如下：

var myDropzone = this;
this.element.querySelector("a[href='#new-intervention']").addEventListener("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
  myDropzone.processQueue();
});

如果用双引号的话，注意要转义（因为外层已经用双引号包裹字符串）：

var myDropzone = this;
this.element.querySelector("a[href=\"#new-intervention\"]").addEventListener("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
  myDropzone.processQueue();
});

替代方案（更简洁/易维护） #

既然你已经在使用jQuery，完全可以用jQuery的选择器来简化代码——jQuery会自动处理选择器的语法细节，避免这类报错：

var myDropzone = this;
$(this.element).find("a[href='#new-intervention']").on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  myDropzone.processQueue();
});

另外，还有一种更清晰的方式：给锚标签添加一个专属的class或id，这样选择器更直观，也不容易受href属性变化的影响：

修改HTML：

<a href="#new-intervention" class="create-intervention-btn">Criar Intervenção</a>

然后JS代码：

var myDropzone = this;
this.element.querySelector(".create-intervention-btn").addEventListener("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
  myDropzone.processQueue();
});

内容的提问来源于stack exchange，提问作者user3242861