防止mousedown事件触发点击事件

Question

我在Chrome、Firefox和IE上尝试了以下代码：

var test = document.getElementById('test');

test.addEventListener( 'click', function ( e ) {
  alert( 'clicked' );
});

test.addEventListener( 'mousedown', function ( e ) {
  e.stopImmediatePropagation();
  e.stopPropagation();
});

在Chrome浏览器中，警告框不会触发；在Firefox和IE中会触发。哪种行为是正确的？如何防止点击事件被触发？

jsBin示例

- TheGr8_Nik

---

哎呀，我正在使用Chrome浏览器，但警告仍然触发了。你到底想要实现什么？ - Passerby

@路人甲 - 你用的是哪个版本的Chrome浏览器？我的是46.0.2490.80 m。 - TheGr8_Nik

дҪ д№ҹеҸҜд»ҘеңЁmousedownдәӢ件дёӯж·»еҠ e.preventDefault();гҖӮдҪҶзҺ°еңЁе®ғеҜ№жҲ‘жңүж•ҲгҖӮдҪ жё…йҷӨдәҶзј“еӯҳ并еҲ·ж–°дәҶеҗ—пјҹ - sailens

我在Chrome上也看到了警报。阻止事件传播只会阻止mousedown事件冒泡，而不是click事件。 - Shreyas

@TheGr8_Nik Linux 46.0.2490.80 (64位) - Passerby

有没有任何方法（不使用变量）可以防止“mousedown事件”触发“click事件”？ - TheGr8_Nik

Answer 1

如果你想要取消点击事件，你可以在捕获阶段进行操作。将一个点击监听器附加到body，以便取消所需元素上的点击事件。addEventListener中的第三个参数可以让你指定是否使用捕获阶段。

http://jsbin.com/kocapuharo/1/edit?html,css,js,output

- Shreyas

---

问题是如何从mousedown事件中执行它。click事件会在鼠标释放按键时触发，因此当你可以使用后者时，执行前者并不总是可行的。 - John

Answer 2

好了！只需运行这段代码片段。

const element = document.getElementById('test');
setupElement(element);

function setupElement(element){
    let clickedByMouse = false;

    element.onclick = (e) => {
        console.log(clickedByMouse);
        if(clickedByMouse){
          e.preventDefault();
        }else{
          doSomething();
          clickedByMouse = false;//reset clickByMouse if needed
        }
        console.log(clickedByMouse);
    }
    
    element.onmousedown = (e) => {
        clickedByMouse = true;
    }

}

#test {
  height: 200px;
  background-color: #000;
}

<div id="test"></div>

- Iglesias Leonardo