javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element

当onmousedown、onmouseup、onclick三个事件同时应用于同一个标签节点Element时，以下是攻略：

1. 原理：

onmousedown事件：当鼠标按下某个键时触发。

onmouseup事件：当鼠标松开某个键时触发。

onclick事件：当鼠标单击某个元素时触发。

当用户按下鼠标键时，会先触发onmousedown事件，当用户松开鼠标键时，会先触发onmouseup事件，最后触发onclick事件。再网页中，onclick事件默认是在onmouseup事件后触发的，如果用户在按下鼠标键后移动鼠标并在释放鼠标键时不在原始的元素上，浏览器将不会触发onclick事件。

1. 示例1：

假设在网页中有一个按钮按钮里面有文字“点击按钮”，我们需要点击该按钮后，在控制台打印"点击了按钮"。以下是对应的HTML和JavaScript代码：

<button onclick="console.log('点击了按钮')" onmousedown="console.log('鼠标按下了按钮')" onmouseup="console.log('鼠标松开了按钮')">点击按钮</button>

当用户单击按钮时，“点击了按钮”会被记录到控制台，在按钮按下和松开时，“鼠标按下了按钮”和“鼠标松开了按钮”也会被记录到控制台。

1. 示例2：

假设我们需要在网页上创建一个可拖动的元素，该元素在按下鼠标时可以被拖动。以下是对应的HTML和JavaScript代码：

<div id="draggable" onmousedown="dragElement(event)">可拖动的元素</div>

<script>
function dragElement(e) {
  e = e || window.event; // IE兼容性
  e.preventDefault();
  // 记录鼠标按下的坐标
  pos1 = e.clientX;
  pos2 = e.clientY;
  // 将鼠标拖动时的事件绑定到文档
  document.onmouseup = closeDragElement;
  document.onmousemove = elementDrag;
}

function elementDrag(e) {
  e = e || window.event; // IE兼容性
  e.preventDefault();
  // 计算元素新的位置
  pos3 = pos1 - e.clientX;
  pos4 = pos2 - e.clientY;
  pos1 = e.clientX;
  pos2 = e.clientY;
  // 设置元素新的位置
  element.style.top = (element.offsetTop - pos4) + "px";
  element.style.left = (element.offsetLeft - pos3) + "px";
}

function closeDragElement() {
  // 解绑鼠标拖动时的事件
  document.onmouseup = null;
  document.onmousemove = null;
}

</script>

当用户按下鼠标键时，该元素会被记录为“可拖动的元素”，并绑定onmousemove和onmouseup事件，其中onmousemove事件会在鼠标移动时触发，在这个事件里，会计算出元素移动的距离，并设置元素新的位置，并在onmouseup事件里解除onmousemove和onmouseup事件。