Javascript 无法在IE11中单击以下图像触发事件

我正在动态生成一个包含一些文本和图像的按钮。我希望当我点击除图像以外的任何地方的按钮时，任务A应该执行，而当我点击图像时，任务B应该执行。但在我的例子中，只有任务A正在发生，甚至当我点击图片时

我正在使用jquery。这是按钮的外观。按钮内部包含一个标签，其中包含右侧的文本和图像

下面的代码用于创建按钮和图像 代码创建按钮

    newTier1 = document.createElement('button');
    newTier1.className = 'col-md-12 btn btn-light dept-list';
    newTier1.style.cursor = 'pointer';
    newTier1.style.textAlign = 'justify';
    newTier1.innerHTML = '<label>' + tier1list[i].companyDeptName + 
    '</label>';

单击按钮时的事件代码：

$(document).on('click', 'button.dept-list', function (e) {
  // TASK A
})

对于图像事件单击，我尝试了两种方法，但都不起作用：

（1） 生成图像时添加函数

    img = document.createElement('img');
    img.src = '../images/head.jpg';
    img.className = 'image-responsive direct-search';
    img.style.width = '40px';
    img.style.height = '40px';
    img.style.cssFloat = 'right';

    newTier1.appendChild(img);

img.onclick = function () {
    // TASK B
}

在上述情况下，生成的HTML中不存在onclick属性

（2） jquery

任务A在两种情况下都发生，程序甚至没有进入第二个选项

在铬上可以很好地工作。如果有任何疑问，请告诉我。感谢您的帮助。多谢各位

newTier1=document.createElement（'button'）；
newTier1.className='col-md-12 btn btn灯光部门列表'；
newTier1.style.cursor='pointer'；
newTier1.style.textAlign='justify'；
newTier1.innerHTML='companyDeptName'；
img=document.createElement（'img'）；
img.src='../images/head.jpg'；
img.className=‘图像响应直接搜索’；
img.style.width='40px'；
img.style.height='40px'；
img.style.cssFloat='right'；
新第1条：儿童（img）；
document.body.appendChild（newTier1）
$（文档）.on（'单击'，'按钮.部门列表'，功能（e）{
console.log（“任务A”）
})
$（文档）.on（'click'，'img.direct search'，函数（）{
控制台日志（“任务B”）
})

---

我最初问了这个问题

我用简单的方法解决了这个问题

<a> 

而不是：

newTier1 = document.createElement('button');

---

现在，它将内部图像识别为一个单独的元素。

但它在chrome中工作。IE的任何解决方法？在

img

单击处理程序中添加对

event.stopPropagation（）

的调用。老实说，我更惊讶的是这一切都能奏效；你真的不应该根据你在Chrome中点击的确切位置来改变

按钮
元素的效果，我也会得到TaskB和TaskA当我点击图像时Chrome很好，在那里我可以使用event.stopPropagation（）进行过滤，但我必须在IE中使用
<button>

newTier1 = document.createElement('a');

newTier1 = document.createElement('button');