如何解决如何在使用 CSS 保持覆盖元素的单击事件的同时单击作为覆盖的元素?
我知道 pointer-events: none;
允许我点击带有 css 的元素。我正在尝试允许点击覆盖 <span>
标签到下面的 span 标签,该标签具有与之关联的重要事件。按住 click 时下方的 span 标签将添加一个类,允许将表格列拖到新位置。问题是我希望能够快速单击具有长按点击的点击的同一覆盖范围。很酷,我知道事件通过嵌套元素冒泡,但问题是跨度彼此相邻而不是嵌套。我无法对元素重新排序,因为这是库的一部分,我必须使用 LESS/CSS 解决此问题。
这是我关心的两个嵌套元素的 HTML 示例:
<span class="reorder-span"> // Longpress span. Has long press event for reordering columns.
</span>
<span class="sort-span"> // Overlaying span. Has mouseup event for sorting the column.
</span>
这是我的 LESS 一团糟:
.icon-content-positioning() {
position: relative;
top: 10px;
float: right;
}
:host::ng-deep {
.ngx-datatable {
.datatable-header {
display: inline-table;
overflow: scroll;
.datatable-header-cell {
position: relative;
border-radius: 4px;
&:hover {
background-color: fadeout(@ws-lightgray,90%);
&.sortable .sort-btn::before {
content: '\2B65';
.icon-content-positioning();
}
}
.resize-handle {
border-right: 3px solid @ws-lightgray;
}
&.sortable .sort-btn {
width: 100%;
height: 100%;
position: absolute;
right: 5px;
top: 0;
&.datatable-icon-up::before {
content: '\65';
.icon-content-positioning();
}
&.datatable-icon-down::before {
content: '\66';
.icon-content-positioning();
}
}
}
}
}
}
编辑:我最终分叉了库存储库并将列标题单击事件移动到父元素。我还结束了将默认 longpress 设置为 500 到 250 毫秒,并删除了在标题单元格中突出显示文本的功能。这创造了更好的用户体验。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。