点击事件处理器中如何使用this？为何点击绿色容器会触发链接点击

一、this关键字失效的原因 #

当前写法中，onclick="change()"是在全局作用域下直接调用函数，非严格模式下函数内部的this会指向全局window对象，而非预期中被点击的<a>元素，所有基于this的DOM操作自然无法生效。

修正方案：

• 触发点击时，将当前被点击的元素作为参数传入函数
• 函数内部通过传入的元素引用操作DOM，不再依赖隐式的this绑定

修正后的JS代码：

function change(triggerEl) {
  const parentContainer = triggerEl.parentElement;
  if (parentContainer.style.height !== "auto") {
    parentContainer.style.height = "auto";
    triggerEl.innerText = "show less";
  } else {
    parentContainer.style.height = "100px";
    triggerEl.innerText = "show more"; // 修正原代码里的笔误 lmore
  }
}

对应的HTML调整：

<a class="read_more" href="javascript:void(0);" onclick="change(this)" style="background-color:yellow; width:50%">show</a>

二、点击容器任意位置触发链接点击的原因 #

异常产生的核心逻辑是<a>标签的默认行内渲染特性 + Grid布局的默认对齐规则共同导致的：

• <a>是默认行内元素，行内元素上设置的width、height属性不会生效
• 你的容器用了Grid布局，Grid item默认的对齐规则是stretch（拉伸填满所在网格轨道），即使是行内元素，作为Grid子项时也会被强制拉伸填满分配给它的网格区域——也就是你设置的第二行（高度1rem）的全宽范围
• 你测试时提到的绿色容器，是本地调整了背景色后的效果，实际和代码里的红底容器逻辑一致：如果没有给a标签设置块级显示属性，它的可点击区域会比你预期的50%宽度大很多，很容易把区域内的点击误判成触发了链接。

修正方式：给<a>标签增加display: block属性，让手动设置的width:50%生效，可点击区域就会严格对应你设置的尺寸，不会出现无规则的拉伸。

内容的提问来源于stack exchange，提问作者cak3_lover