HTML textarea 无法点击(并且无法在里面输入)

HTML textarea is unclickable (and can not type inside)

我正在独立 PC 上开发一个项目,所以我无法 post 从中获取代码,但我已设法将问题最小化。

我正在尝试添加一个字段,但无论何时单击它,它都会立即 "loses" 单击,使我无法在其中输入内容。我唯一可以打字和插入输入的是我一直点击鼠标,这对我来说很奇怪。

我做了几年的全栈程序员,从来没有遇到过这么奇怪的事情。

请注意,该项目仅使用 jQuery,没有使用其他框架(Django 服务器端,但我想这无关紧要。)

我在互联网和 Whosebug 上遇到过很多类似的问题,但最接近的问题是通过不关闭标签或不关闭标签上方的标签来解决的。

好吧,因为我不能 post 整个代码,所以我设法将它缩小到一个非常奇怪的情况。

HTML:

<body style="width: 1250px; height: 872.8px">
    <div id="taskAnnotationCenterPanel">
        <div id="player">
        .
        .
        .

CSS:

#taskAnnotationCenterPanel {
    width: 83%;
    height: 100%;
    float:left;
}

#player {
    margin: auto;
    width: 100%;
    height: 100%
}

现在是奇怪的部分 - 如果我添加: <textarea rows="5" cols="50"></textarea>

#player div 中,它不可点击,正如我在开始时所描述的那样。 如果我把它放在它上面,那么它会按预期完美运行。 但是,如果我 return <textarea> 回到 #player div,它就起作用了!非常奇怪和令人困惑...(我通过 Chrome 的 F12 devtools 编辑 html 所做的所有这些更改,所以我知道这不是渲染问题。)

编辑: 好吧,所以我设法注意到它为什么会被破坏,在代码的其他地方(来自 git 的开源项目 cvat)它们覆盖了 #player div 的点击事件。

如何在不删除 div 的情况下删除(使用 jquery)#player div 中 <textarea> 的所有现有事件'事件?

提前感谢您提供解决方案的想法! :)

How could I remove all existing events of the which is inside the #player div without removing the div's event?

你可以试试:

$('#player textarea').off(<event>);

感谢 cat 的一位贡献者,我找到了解决方案:

$('#idOfYouTextArea').on('click', e => e.stopPropagation())