javascript：如何在span中触发单击事件，有点难，高手请进

Posted 2023-04-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript：如何在span中触发单击事件，有点难，高手请进相关的知识，希望对你有一定的参考价值。

我想在单击‘我的显示信息’文本的时候触发movediv()事件，怎么有错误？
但是当我直接写在onclick后面就没有问题了，这是怎么回事?
请高手指教

<html>
<head>
<script>
function display()

document.write("<table name='tabframe'align='center' style='text-align:center;background-color:green;'>");
document.write("<tr><td><input type=button style='color:red;width:200;height:100;border:1px solid #111111' value='div留言' onclick=document.getElementById('divframe').style.display='block'></td></tr></table>");
document.write("<div id='divframe' style='width:500px;height:100px;display:none;position:absolute;background-color:#dddddd;top:200;left:200;'>");
document.write("<table align='center' border=1 style='text-align:center;border:1px solid #aaaaaa '>");
document.write("<tr><td style='text-align:center;'><span onclick=this.movediv();>我的显示信息</span></td></tr>");
document.write("<tr><td>文字</td></tr>");
document.write("<tr><td><span style='cursor:hand;' onclick=document.getElementById('divframe').style.display='none'>[关闭]</td></tr>");
document.write("</table>");
document.write("</div>");

function movediv()

alert('aa');

</script>
</head>
<body onload="display()">
</body>
</html>
onclick='movediv()' 也不能成功

moxiaoxing请把代码贴出来，onclick='movediv();'不通过

首先你查看一下js错误，movediv()未定义，然后查看一下源文件就明白是怎么回事了，document.write将重新生成HTML源码，以前的代码已经丢失，所以我给你改写了一下；
还有"this.movediv()"的"this"是错误的，去掉；
修改后的代码如下，希望对你有用：

<html>
<head>
<script>
function display()

var ss="<table name='tabframe'align='center' style='text-align:center;background-color:green;'>";
ss+="<tr><td><input type=button style='color:red;width:200;height:100;border:1px solid #111111' value='div留言' onclick=document.getElementById('divframe').style.display='block'></td></tr></table>";
ss+="<div id='divframe' style='width:500px;height:100px;display:none;position:absolute;background-color:#dddddd;top:200;left:200;'>";
ss+="<table align='center' border=1 style='text-align:center;border:1px solid #aaaaaa '>";
ss+="<tr><td style='text-align:center;'><span onclick=movediv();>我的显示信息</span></td></tr>";
ss+="<tr><td>文字</td></tr>";
ss+="<tr><td><span style='cursor:hand;' onclick=document.getElementById('divframe').style.display='none'>[关闭]</td></tr>";
ss+="</table>";
ss+="</div>";
window.document.body.innerHTML+=ss;
/*
document.write("<table name='tabframe'align='center' style='text-align:center;background-color:green;'>");
document.write("<tr><td><input type=button style='color:red;width:200;height:100;border:1px solid #111111' value='div留言' onclick=document.getElementById('divframe').style.display='block'></td></tr></table>");
document.write("<div id='divframe' style='width:500px;height:100px;display:none;position:absolute;background-color:#dddddd;top:200;left:200;'>");
document.write("<table align='center' border=1 style='text-align:center;border:1px solid #aaaaaa '>");
document.write("<tr><td style='text-align:center;'><span onclick=this.movediv();>我的显示信息</span></td></tr>");
document.write("<tr><td>文字</td></tr>");
document.write("<tr><td><span style='cursor:hand;' onclick=document.getElementById('divframe').style.display='none'>[关闭]</td></tr>");
document.write("</table>");
document.write("</div>");
*/

function movediv()

alert('aa');

</script>
</head>
<body onload="display()">

</body>
</html> 参考技术A 首先你查看一下js错误，movediv()未定义，然后查看一下源文件就明白是怎么回事了，document.write将重新生成HTML源码，以前的代码已经丢失，所以我给你改写了一下；还有“this.movediv()“的“this“是错误的，去掉；修改后的代码如下，希望对你有用：amp;lt;htmlamp;gt;nbsp;amp;lt;headamp;gt;nbsp;amp;lt;scriptamp;gt;nbsp;functionnbsp;display()nbsp;nbsp;varnbsp;ss=“amp;lt;tablenbsp;name=‘tabframe‘align=‘center‘nbsp;style=‘text-align:center;background-color:green;‘amp;gt;“;ss+=“amp;lt;tramp;gt;amp;lt;tdamp;gt;amp;lt;inputnbsp;type=buttonnbsp;style=‘color:red;width:200;height:100;border:1pxnbsp;solidnbsp;#111111‘nbsp;value=‘div留言‘nbsp;onclick=document.getElementById(‘divframe‘).style.display=‘block‘amp;gt;amp;lt;/tdamp;gt;amp;lt;/tramp;gt;amp;lt;/tableamp;gt;“;ss+=“amp;lt;divnbsp;id=‘divframe‘nbsp;style=‘width:500px;height:100px;display:none;position:absolute;background-color:#dddddd;top:200;left:200;‘amp;gt;“;ss+=“amp;lt;tablenbsp;align=‘center‘nbsp;border=1nbsp;style=‘text-align:center;border:1pxnbsp;solidnbsp;#aaaaaanbsp;‘amp;gt;“;ss+=“amp;lt;tramp;gt;amp;lt;tdnbsp;style=‘text-align:center;‘amp;gt;amp;lt;spannbsp;onclick=movediv();amp;gt;我的显示信息amp;lt;/spanamp;gt;amp;lt;/tdamp;gt;amp;lt;/tramp;gt;“;ss+=“amp;lt;tramp;gt;amp;lt;tdamp;gt;文字amp;lt;/tdamp;gt;amp;lt;/tramp;gt;“;ss+=“amp;lt;tramp;gt;amp;lt;tdamp;gt;amp;lt;spannbsp;style=‘cursor:hand;‘nbsp;onclick=document.getElementById(‘divframe‘).style.display=‘none‘amp;gt;[关闭]amp;lt;/tdamp;gt;amp;lt;/tramp;gt;“;ss+=“amp;lt;/tableamp;gt;“;ss+=“amp;lt;/divamp;gt;“;window.document.body.innerHTML+=ss;/*document.write(“amp;lt;tablenbsp;name=‘tabframe‘align=‘center‘nbsp;style=‘text-align:center;background-color:green;‘amp;gt;“);nbsp;document.write(“amp;lt;tramp;gt;amp;lt;tdamp;gt;amp;lt;inputnbsp;type=buttonnbsp;style=‘color:red;width:200;height:100;border:1pxnbsp;solidnbsp;#111111‘nbsp;value=‘div留言‘nbsp;onclick=document.getElementById(‘divframe‘).style.display=‘block‘amp;gt;amp;lt;/tdamp;gt;amp;lt;/tramp;gt;amp;lt;/tableamp;gt;“);nbsp;document.write(“amp;lt;divnbsp;id=‘divframe‘nbsp;style=‘width:500px;height:100px;display:none;position:absolute;background-color:#dddddd;top:200;left:200;‘amp;gt;“);nbsp;document.write(“amp;lt;tablenbsp;align=‘center‘nbsp;border=1nbsp;style=‘text-align:center;border:1pxnbsp;soli 参考技术B <span onclick='movediv();'>
是可以的，我已经测试通过．
这里提醒你一下，要知道this的意思．
你用this 则指向了span本身，span本身没有movediv的方法，自然会报错．所以直接用movediv调用函数即可．参考技术C <span onclick=movediv()>我的显示信息</span>
或
<span onclick='movediv()'>我的显示信息</span>

就OK了.不用写成this.movediv();

单击文本框时会触发哪个 javascript 事件？

【中文标题】单击文本框时会触发哪个 javascript 事件？【英文标题】：Which javascript event is triggered when a textbox is clicked? 【发布时间】：2019-10-28 18:09:25 【问题描述】：

我需要找到在单击 textarea 时在移动设备上弹出键盘的触发事件，以便我可以使用该 textarea 中的信息填充我创建的 textarea 弹出窗口。我还需要将我创建的文本区域附加到移动键盘上。

编辑

我正在创建我们网站的移动版本。现在，在大屏幕上，如果你点击一个已在框中保存信息的文本区域，你就可以对其进行编辑。

在移动版本上，他们希望在您单击（触摸）文本框时出现一个弹出文本框，其中已经预先填充了原始信息，并且它还附加到移动设备上弹出的键盘顶部。我需要将新文本框附加到同一个点击事件，并用可编辑的信息填充它。

【问题讨论】：

到目前为止您尝试过什么？你能附上你的代码sn-ps吗？ 'click' 事件可能吗？有一个通用的javascript点击事件，但你真的把它复杂化了。除了单击之外，您无需执行任何操作即可让键盘在移动设备上弹出。如果没有发生这种情况，您的代码或设备本身可能存在问题。在我看来你所做的不值得。首先，移动键盘不是网页的一部分，它是浏览器的一部分，它的实现将在浏览器/设备/操作系统之间改变。只是浏览器处理它...续 .. 续。如果您必须走这条路，则需要检测到您正在使用移动浏览器。检测文本区域何时具有焦点。创建文本框的填充副本。将此副本显示在页面上将随浏览器/操作系统/设备/设备方向更改的位置。将焦点更改为新文本框以接收输入。然后，当输入完成时，反转该过程并填充原始文本框。所以有很多事情要做，但收获不多。采取几个步骤的一种选择是仅分离文本框并更改其位置。还有很多工作。 【参考方案1】：

在 JS 中混淆事件是一个常见的错误。您正在寻找的不是点击，而是focus 事件。当然，您可以通过单击来聚焦元素，但您也可以使用“tab”键浏览元素。如果您正在处理纯 JS，您可以使用 HTML 附加事件。

纯 HTML/JS：

<textarea name="xxx" id="textid" onfocus="alert('focused');"></textarea>

JQuery:

$('#textid').on('focus', function() 
    alert('focused');
);

要获得一个好的答案，您需要提供一些代码示例，说明您已经拥有什么、尝试过什么以及什么不起作用。

【讨论】：

以上是关于javascript：如何在span中触发单击事件，有点难，高手请进的主要内容，如果未能解决你的问题，请参考以下文章

即使通过Javascript代码检查，如何触发复选框单击事件？

如何从 ASP.NET 中的 JavaScript 触发按钮单击事件

如何获取触发事件时执行的 JavaScript 文件列表？

如何设置可以通过 JavaScript onclick 事件触发的 PHP Curl POST 请求？

如何触发 JavaScript 事件点击

Javascript中如何按下回车键(Enter)触发click事件