event.target获取元素css定位

使用 `event.target` 可以获取触发事件的元素，然后可以通过元素的 `offsetLeft` 和 `offsetTop` 属性获取其相对于其父元素的水平和垂直偏移量，从而得到元素的位置。例如：

<div id="myDiv" style="position: relative; left: 50px; top: 100px;">Hello World</div>

<script>
document.getElementById("myDiv").addEventListener("click", function(event) {
  var elem = event.target;
  var left = elem.offsetLeft;
  var top = elem.offsetTop;
  console.log("Left: " + left + "px, Top: " + top + "px");
});
</script>

当点击 `<div>` 元素时，可以在控制台中看到输出的位置信息。注意，元素的位置是相对于其父元素的位置，因此需要考虑父元素的位置和样式。

相关问题

$(".table1").click(function(event){ var tr=$(event.target).closest("tr"); var text=tr.find("td:first").text(); console.log(text); $(".table2").empty();点击table选中行，选中行改变颜色，再次点击或点击其他table行则原先改变的行恢复，而再次点击的行改变颜色 具体代码

这段代码实现了点击表格的某一行，可以获取该行第一列的文本内容，并将该行变成选中状态（改变背景色），同时其他行的选中状态会被取消。

$(".table1").on("click", "tr", function(event) {
  var tr = $(this);
  var text = tr.find("td:first").text();
  console.log(text);
  if (tr.hasClass("selected")) {
    tr.removeClass("selected");
  } else {
    tr.addClass("selected").siblings().removeClass("selected");
  }
  $(".table2").empty();
});

需要注意的是，该代码是基于jQuery的事件委托方式实现的，因此需要将事件处理程序绑定到table1的父元素上，这里假设是document，如果不是，需要将代码中的".table1"替换为正确的父元素选择器。同时，需要在CSS中定义.selected类的样式，以实现选中行的视觉效果。

react如何解决点击子元素后父元素的css样式也生效

在 React 中，也可以使用事件委托来解决点击子元素后父元素的 CSS 样式也生效的问题。不同于使用原生 JavaScript，React 中需要使用 `event.currentTarget` 属性来获取当前绑定事件的元素。

例如，如果你想让点击子元素时不触发父元素的事件，可以通过以下代码实现：

class Parent extends React.Component {
  handleClick = (event) => {
    if (event.target.classList.contains('child')) {
      // 执行子元素的操作
    }
    event.stopPropagation(); // 阻止事件冒泡到父元素
  }
  
  render() {
    return (
      <div className="parent" onClick={this.handleClick}>
        <div className="child">子元素</div>
        <div className="child">子元素</div>
        <div className="child">子元素</div>
      </div>
    );
  }
}

在 `handleClick` 方法中，我们使用 `event.target` 来获取触发事件的元素，使用 `event.currentTarget` 来获取当前绑定事件的元素。当触发事件的元素是子元素时，执行子元素的操作，同时使用 `event.stopPropagation()` 方法阻止事件冒泡到父元素。

这样，当你点击子元素时，只会触发子元素的操作，不会触发父元素的事件。