刺激控制器显示/隐藏工具箱，但允许单击
刺激控制器显示/隐藏工具箱，但允许单击
提问于 2022-12-03 07:27:20
我有一个内容可编辑块，它有一个工具箱。当您专注于内容可编辑块时，工具箱将出现(它是实际工具栏的折叠按钮)。如果您在工具箱上计时，则需要向其添加引导类“活动”。如果我们完全将焦点放在内容块之外，那么工具箱就会消失(一个新的工具箱会出现在另一个内容块上)。
由于需要单击工具箱，我无法让第三个事件侦听器按预期的方式工作。
HTML：
.border.border-dark.p-4
.position-relative.w-100{data: {controller: "content", content:{block:{value: true}}}}
.position-absolute.bg-white{style: "right: 101%"}
%button.d-none.btn.btn-outline-dark{type: "button", data: {content_target: "toolbox", bs:{toggle: "collapse", target: "#toolbar1"}}}
%i.bi.bi-hammer
#toolbar1.collapse.position-absolute.bottom-100.bg-white.btn-toolbar{role: "toolbar", aria:{label: "Toolbar with button groups"}}
.btn-group.me-2{role: "group", aria:{label: "First group"}}
%button.btn.btn-outline-dark.active{type: "button"} H2
%button.btn.btn-outline-dark{type: "button"} H3
%button.btn.btn-outline-dark{type: "button"} H4
%button.btn.btn-outline-dark{type: "button"} H5
%button.btn.btn-outline-dark{type: "button"} H6
%button.btn.btn-outline-dark{type: "button"}
%i.bi.bi-paragraph
%p{contenteditable: true, data: {content_target: "contentBlock"}} This is some text以及刺激
this.contentBlockTarget.addEventListener("focus", (event) => {
this.toolboxTarget.classList.remove("d-none")
})
this.toolboxTarget.addEventListener("click", (event) => {
this.toolboxTarget.classList.add("active")
this.toolboxTarget.classList.remove("active")
})
this.contentBlockTarget.addEventListener("focusout", (event) => {
this.toolboxTarget.classList.add("d-none")
})这是我的要求：
- 如果用户关注于contentBlock (在此HTML是a )，则应该出现工具箱(删除类“remove”)。(第一个事件侦听器做得很好)
- 如果用户单击工具箱，添加类"active“。(如果第三个事件侦听器被注释掉，这就很好了)。如果第三个侦听器处于活动状态，单击工具箱将使其消失，因此工具栏将不会实际出现。如果用户单击不在工具箱的任何位置，或者光标不在此区域(如在该区域中维护光标)，则需要将"d-none“添加回。
。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-12-03 20:08:47
解决此问题的一种方法是使用事件侦听器和CSS类的组合。
首先，默认情况下可以将d-none类添加到工具箱中。然后，可以使用内容可编辑块上的focus事件侦听器删除d-none类并使工具箱出现。
若要在单击active类时将其添加到工具箱中，可以在工具箱本身上使用click事件侦听器。在事件侦听器中，可以将active类添加到工具箱中，然后使用setTimeout函数在短暂延迟后将其删除。
最后，要在工具箱不在焦点时隐藏它，可以在内容可编辑块上使用focusout事件侦听器。在事件侦听器中，可以检查用户是否使用active类单击工具箱。如果他们没有点击工具箱，您可以添加d-none类来隐藏它。
// Add the "d-none" class to the toolbox by default
this.toolboxTarget.classList.add("d-none");
// Show the toolbox when the content editable block is focused
this.contentBlockTarget.addEventListener("focus", (event) => {
this.toolboxTarget.classList.remove("d-none");
});
// Add the "active" class to the toolbox when it is clicked
this.toolboxTarget.addEventListener("click", (event) => {
this.toolboxTarget.classList.add("active");
setTimeout(() => {
this.toolboxTarget.classList.remove("active");
}, 100); // Remove the "active" class after a brief delay
});
// Hide the toolbox when it is not in focus
this.contentBlockTarget.addEventListener("focusout", (event) => {
if (!this.toolboxTarget.classList.contains("active")) {
this.toolboxTarget.classList.add("d-none");
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74664795
复制相关文章
相似问题
腾讯云开发者
