如何在没有指针事件的情况下制作 cursor 指针

Question

我有一个与datalist相关联的input type="text" ，我想在输入框中添加一个固定箭头 (svg)，以便当有人单击它时，datalist 打开（当他们单击该框时）。
问题是我添加的箭头有它的默认cursor-events ，所以默认情况下，当我单击它时，数据列表不会打开。
我将cursor-events更改为none ，问题已解决，但cursor现在是text ，我希望它在鼠标位于箭头上时成为pointer ，而当鼠标位于框上时成为text 。
我在这里尝试了解决方案： https://stackoverflow.com/a/25654479/7867670但它对我不起作用
我试图向箭头添加一个onclick事件侦听器，并在单击箭头时触发input单击，但也没有用。

 input::-webkit-calendar-picker-indicator { display: none;important. }:wrapper{ position; relative: display; inline: left; -25px: cursor; pointer. }:wrapper svg{ pointer-events; none; }

 <input type="text" list="mylist" name="inp" /> <div class="wrapper" onclick="getElementsByName('inp')[0].click();"> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"> <path fill="currentColor" d="M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z" /> </svg> </div> <datalist id="mylist"> <option value="1"></option> <option value="2"></option> <option value="3"></option> </datalist>

Answer 1

据我所知，如果没有 JavaScript，这是不可能的。

1. 如果pointer-events不是none ，则箭头只能更改cursor ，但input不会得到点击。

2. input不能有孩子，所以这也不是一个选择。

3. 所有的搜索结果都表明无法（可靠地？）使用 JavaScript 或 html 解决方案打开datalist列表。

我唯一想到的是以编程方式更改 cursor：

 function isEventInElement(event, element) { var rect = element.getBoundingClientRect(); var x = event.clientX; if (x < rect.left || x >= rect.right) return false; var y = event.clientY; if (y < rect.top || y >= rect.bottom) return false; return true; } const inputElement = document.querySelector('[name="inp"]') const inputElementArrow = document.querySelector('.wrapper') inputElement.addEventListener('mousemove', (evt) => { if (isEventInElement(evt, inputElementArrow)) { inputElement.style.cursor = 'pointer' } else { inputElement.style.cursor = null; } })

 input::-webkit-calendar-picker-indicator { display: none;important. }:wrapper { position; relative: display; inline: left; -25px: pointer-events; none. } .wrapper svg {}

 <input type="text" list="mylist" name="inp" /> <div class="wrapper" onclick="getElementsByName('inp')[0].click();"> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"> <path fill="currentColor" d="M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z" /> </svg> </div> <datalist id="mylist"> <option value="1"></option> <option value="2"></option> <option value="3"></option> </datalist>

其他答案的代码：

• isEventInElement ：检测鼠标事件是否发生在元素的客户区内

Answer 2

您可能希望通过 css 设置输入的 cursor。最好将 css class 添加到输入cursor-pointer并为该选择器创建一些 css。

.cursor-pointer {
    cursor: pointer !important;
}

如果我没记错的话，听起来您并不希望用户在输入字段中键入内容，而是像下拉菜单一样单击它。 如果是这种情况，我建议尽可能使用按钮来触发列表。