在JavaScript事件处理中，事件冒泡是一个常见的概念，它描述了事件从最深的节点开始向上层节点传播的过程。在给定的标题和描述中，我们关注的是如何阻止子元素继承父元素的事件，即阻止事件冒泡。下面将详细解释事件冒泡的工作原理以及如何实现阻止子元素事件冒泡到父元素。
事件冒泡是事件处理中的一个重要特性，当一个元素上的事件被触发后，该事件会依次向上层元素传播，直到到达文档的根节点。这个过程就是事件冒泡。例如，在给定的代码片段中，`#p_cont` 是 `#p_box` 的子元素，当用户点击 `#p_cont` 区域时，`#p_box` 上绑定的点击事件 `onclick="a()"` 也会被触发，这就是事件冒泡现象。
要阻止这种事件冒泡，我们可以利用事件对象的 `stopPropagation()` 方法（非IE浏览器）或 `cancelBubble` 属性（IE浏览器）。`stopPropagation()` 方法可以防止事件继续向上传播，而 `cancelBubble` 属性设置为 `true` 也有同样的效果。在示例代码中，`stopBubble` 函数就是用来执行这个操作的：
```javascript
function stopBubble(e) {
if (e && e.stopPropagation) { // 非IE浏览器
e.stopPropagation();
} else { // IE浏览器
window.event.cancelBubble = true;
}
}
```
在 `#p_cont` 元素上添加点击事件处理函数 `onclick="stopBubble(this.id)"`，当 `#p_cont` 被点击时，`stopBubble` 函数会被调用，从而阻止事件继续向上冒泡。这样，即使用户点击了 `#p_cont`，也不会触发 `#p_box` 上的 `a()` 事件。
完整实现如下：
```html
<div id="p_box" onclick="a()">
<div id="p_cont" onclick="stopBubble(this.id)">
</div>
</div>
<script>
function a() {
// 这里是a事件的代码，由于阻止了冒泡，这个函数不会被调用
}
function stopBubble(e) {
if (e && e.stopPropagation) { // 非IE浏览器
e.stopPropagation();
} else { // IE浏览器
window.event.cancelBubble = true;
}
}
</script>
```
通过这样的处理，我们成功地阻止了 `#p_cont` 的点击事件冒泡到 `#p_box`，实现了阻止子元素继承父元素事件的目标。在实际开发中，合理运用事件冒泡和阻止冒泡策略可以优化事件处理性能，避免不必要的事件处理和提高代码的可维护性。
