イベントの初期動作を停止
a要素などでonclickイベントを使用した場合に、イベントの初期動作や伝播を停止する方法です。
イベントの停止はpreventDefaultメソッド、stopPropagationメソッドの2種類があります。
デモ
イベントの初期動作を停止
イベントの初期動作を停止させるにはpreventDefaultメソッドを使用します。
また、IEは9以上で使用でき、IE8以下ではreturnValueプロパティで停止することができます。
JavaScript
var btnElem = document.getElementById('button');
btnElem.onclick = function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}イベントの伝播を停止
イベントの伝播を停止させるにはstopPropagationメソッドを使用します。
また、IEは9以上で使用でき、IE8以下ではcancelBubbleプロパティで停止することができます。
JavaScript
var btnElem = document.getElementById('button');
btnElem.onclick = function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}