阻止默认行为的兼容写法

在JavaScript DOM操作中，阻止默认行为是一个常见的需求。当用户与页面交互时，浏览器会执行一些默认操作，比如点击链接会跳转页面，提交表单会刷新页面等。有时我们需要阻止这些默认行为，以实现自定义的交互逻辑。

基本方法

现代浏览器提供了event.preventDefault()方法来阻止事件的默认行为：

javascript 复制代码

element.addEventListener('click', function(event) {
  event.preventDefault();
  // 自定义逻辑
});

兼容性写法

然而，在旧版IE浏览器(IE8及以下)中，preventDefault()方法不可用，需要使用event.returnValue属性：

javascript 复制代码

function preventDefault(event) {
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false; // IE8及以下
  }
}

element.onclick = function(event) {
  event = event || window.event; // 兼容IE的event获取方式
  preventDefault(event);
  // 自定义逻辑
};

完整兼容方案

为了全面兼容各种浏览器，包括旧版IE，我们可以使用以下完整方案：

javascript 复制代码

function handleEvent(event) {
  // 标准化event对象
  event = event || window.event;
  
  // 阻止默认行为
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
  
  // 阻止事件冒泡
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }
  
  // 自定义逻辑...
}

// 添加事件监听
if (element.addEventListener) {
  element.addEventListener('click', handleEvent, false);
} else if (element.attachEvent) {
  element.attachEvent('onclick', handleEvent);
} else {
  element.onclick = handleEvent;
}

实际应用示例

假设我们需要阻止表单的默认提交行为，改为AJAX提交：

javascript 复制代码

var form = document.getElementById('myForm');

function submitForm(event) {
  event = event || window.event;
  
  // 阻止默认提交
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
  
  // 获取表单数据
  var formData = new FormData(form);
  
  // AJAX提交
  var xhr = new XMLHttpRequest();
  xhr.open('POST', form.action, true);
  xhr.onload = function() {
    // 处理响应
  };
  xhr.send(formData);
}

// 添加事件监听
if (form.addEventListener) {
  form.addEventListener('submit', submitForm, false);
} else if (form.attachEvent) {
  form.attachEvent('onsubmit', submitForm);
} else {
  form.onsubmit = submitForm;
}

注意事项

在旧版IE中，事件对象是全局的window.event，而不是作为参数传递
returnValue和cancelBubble是IE特有的属性
现代浏览器推荐使用addEventListener，而旧版IE使用attachEvent
在jQuery等库中，这些兼容性问题已经被封装，可以直接使用event.preventDefault()

通过以上兼容写法，我们可以确保在各种浏览器中都能有效地阻止默认行为，实现一致的交互体验。