主页 / 问题 / 1415984
Accepted
Iceman
Asked:2022-08-01 21:45:24 +0800 CST2022-08-01 21:45:24 +0800 CST

如何覆盖输入元素上的上下文菜单？

  • 772

重新定义输入的上下文菜单不起作用。

在每个内部的表格中都有table-cell一个disabled input- 元素（文本或复选框）。table-row在块上设置了一个事件oncontextmenu。该菜单应该激活用于编辑、保存和停用的输入。不幸的是，仅当单击发生table-cell在输入开始之前（在 内padding）时才重新定义菜单，并且如果单击输入，则其上的设置event.preventDefault()不起作用，并且用于编辑输入的标准浏览器菜单出现。

如何绕过它？我希望用户只需单击表格的行，该行将在悬停时突出显示，而不是寻找自定义菜单可以工作的区域。

这是一个示例：它适用于块，但不适用于输入。

div {
    background: gray;
    padding: 8px;
    width: 32px;
    text-align: center;
}
Right click on input and div:<br>
<input type="text" value="input" disabled oncontextmenu="event.preventDefault();alert(event.x)">
<hr>
<div oncontextmenu="event.preventDefault();alert(event.x)">div</div>

[更新] 不适用于disabled输入。工作在活跃

javascript html

2 个回答

  1. Best Answer

    带有事件的元素disabled会忽略对其触发的事件。但是，它们可以将事件向上传递到 DOM 树（并非在所有浏览器中），因此事件处理程序可以放置在父元素上。在这里，完整的 Firefox。将忽略所有已经发生的事件，并且不会考虑将它们传递到任何地方。

    在这种情况下，有 2 个选项：

    1. 创建一个不可见的元素并将其放置在被阻止的元素之前。该事件不会发生在按钮上，而是发生在它前面的元素上，并且通过冒泡将事件传递给公共父级，在那里它将被成功处理。
    2. 使用样式，将元素的可见性设置为阻塞，并设置元素本身readonly而不是disabled

    第一个选项

    .row {
    background: gray;
    padding: 30px 20px;
    text-align: center;
    display: inline-block;
}

.btn-wrapper {
  position: relative;
}

.btn-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 255, 0.4);
}
    Right click on input and div:<br>

<div class="row" oncontextmenu="event.preventDefault();alert(event.x)">
  <div class="btn-wrapper">
    <input type="text" value="input" disabled>
    <div class="btn-hidden" />
  </div>
</div>

    第二个选项

    .row {
    background: gray;
    padding: 30px 20px;
    text-align: center;
    display: inline-block;
}

.btn {
  background-color: rgba(239, 239, 239, 0.3);
  color: rgb(84, 84, 84);
  border: none;
  outline: none;
}
    Right click on input and div:<br>

<div class="row" oncontextmenu="event.preventDefault();alert(event.x)">
    <input class="btn" type="text" value="input" readonly>
  </div>
</div>

    • 2

  2. 知道了！事实证明disabled，鼠标事件对元素不起作用，同时它们也不会到达父级。如果你写在 styles input[disabled] { pointer-events: none; }，那么事件将到达父元素，它可以被重新定义，一切都会工作。

    • 0

相关问题