Javascript 将未使用jQuery而单击的div中的特定元素作为目标

我有一个项目列表，我想在其中监听哪个项目被点击，并更改该项目中内部div的CSS

var inactiveItems = document.getElementsByClassName('inactive');

for (var i = 0; i < inactiveItems.length; i++) {
  inactiveItems[i].addEventListener('click', handleClick, false);
}

function handleClick(e) {
  var width = document.body.clientWidth;
  console.log(e.target);
  if (width < 960) {
    e.target.style.top = '0px';
  }
}

var-inactiveItems=document.getElementsByClassName（'inactive'）；
对于（变量i=0；i

这是我的HTML：

<li class="days_item days_item inactive"">
  <span>19</span>
  <div class="locked-item"></div>
</li>

访问以获取事件侦听器最初附加到的元素，而不是访问（单击的元素）。然后，您可以通过链接
.querySelector（'.locked item'）
来选择子
.locked item
：


功能手柄点击（e）{
var width=document.body.clientWidth，
day=e.currentTarget，
lockedItem=day.querySelector（'.locked item'）；
如果（宽度<960&&lockedItem！==null）{
lockedItem.style.top='0px'；
}
}
一种方法是使用
this.getElementsByClassName（'locked-item'）[0]
选择该


var-inactiveItems=document.getElementsByClassName（'inactive'）；
对于（变量i=0；i


19
x
您最初的描述是有效的，但是，您能在没有两层嵌套命题的情况下表达它吗？我投了赞成票，因为这是一个很好的解决方案，但我想知道只有jQuery知道的人是否会理解DOM事件传播来理解它。
function handleClick(e) {
    var width = document.body.clientWidth,
        day = e.currentTarget,
        lockedItem = day.querySelector('.locked-item');

    if (width < 960 && lockedItem !== null) {
        lockedItem.style.top = '0px';
    }
}