html网页中，ONCLICK事件时，在指定DIV中打开外部JS文件，怎样实现？

Posted 2023-04-26

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html网页中，ONCLICK事件时，在指定DIV中打开外部JS文件，怎样实现？相关的知识，希望对你有一定的参考价值。

要求，在没有ONCLICK事件时不加载外部JS文件，只有在ONCLICK事件发生时才加载外部JS文件。

一、第一种情况：

1.后台方法：

protected string CsharpVoid(string strCC)

return strCC;

2.javascript 调用
<script language="javascript">

var s = "<%=CsharpVoid("")%>";
document.write(s);

</script>

第二种情况：

1.后代码：
protected void CsharpVoid()

string strCC = "";
Response.Write(strCC);

2.调用方法：CsharpVoid()

<script language="javascript">
document.write("<%CsharpVoid();%>");
</script>

第三种方法：
你可在页面中放一个按钮,把它设置为不可见style="display:none",然后,用脚本让此按钮点击
document.all("button1").click();
在此按钮的C#后台中写事件代码,这就是最简单的脚本调用C#方法.

二、我要的结果是当我去点按钮时,在去带参数去触发后台方法.怎么样写高手指点

html code：
<html xmlns="">
<head runat="server">
<title></title>

<script type="text/javascript">
function Say(strValue)
PageMethods.SayH(strValue, ShowMsg);

function ShowMsg(result)
var sResult = result.toString();

document.getElementById("rMsg").innerHTML = sResult;

</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<input id="Button1" type="button" value="点击我" onclick="Say('你是猪');" />
</div>
<div id="rMsg">
</div>
</form>
</body>
</html>

C# code：
[System.Web.Services.WebMethod]
public static string SayH(string name)

return string.Format("welcome to site , !", name);

好人有好报希望能采纳嘿嘿！！！

参考技术A 在指定的div上加onclick事件啊

选择文本时防止 onClick 事件

【中文标题】选择文本时防止 onClick 事件【英文标题】：Prevent onClick event when selecting text 【发布时间】：2015-11-06 01:51:24 【问题描述】：

我遇到了这个问题，我需要在单击表格单元格时显示和隐藏 div。不过，我也希望人们能够选择文本并将其复制到单元格中，而不会隐藏信息。

如有必要，完全愿意更改设计。 :)

这是一个演示问题的小提琴

http://jsfiddle.net/k61u66ek/1/

这是小提琴中的 HTML 代码：

<table border=1>
    <tr>
        <td>
            Information
        </td>
        <td onClick="toggleInfo()">
            <div id="information" style="display:none">
                More information that I want to select without hiding
            </div>
            <div id="clicktoshow">
                Click to show info
            </div>

        </td>
    </tr>
</table>

这里是javascript：

function toggleInfo() 
    $("#clicktoshow").toggle();
    $("#information").toggle();

非常感谢任何建议/建议！

/帕特里克

【问题讨论】：

简单的解决方案是使用双击而不是单击。检查jsfiddle.net/k61u66ek/2 【参考方案1】：

您可以检查单击事件处理程序中是否有选择：

window.getSelection().toString();

【讨论】：

【参考方案2】：

一种选择是检查window.getSelection返回的Selection对象的type：

function toggleInfo() 
    var selection = window.getSelection();
    if(selection.type != "Range") 
        $("#clicktoshow").toggle();
        $("#information").toggle();

http://jsfiddle.net/k61u66ek/4/

更新

如果您的目标浏览器没有在 Selection 对象上公开 type 属性，那么您可以改为测试所选值的长度：

function toggleInfo() 
    var selection = window.getSelection();
    if(selection.toString().length === 0) 
        $("#clicktoshow").toggle();
        $("#information").toggle();

http://jsfiddle.net/k61u66ek/9/

这又可以简化为对 toString 的布尔检查：

if(!selection.toString())

http://jsfiddle.net/k61u66ek/10/

【讨论】：

谢谢@t00thy，当type 不可用时，我已经更新了我的答案以包含一个解决方案。或者有我的解决方案，捕捉鼠标点击时间http://jsfiddle.net/k61u66ek/15/ 我将点击和复制情况之间的差异设置为 200 毫秒。也许会有所帮助。似乎 toString() 是比 type=="Range" 更好的选择，至少在 IE11 和 Firefox 上是这样【参考方案3】：

您可以使用mouseup、mousedown 和mousemove 事件来实现此目的：

DEMO

var isDragging = false;
$("#clickshow")
.mousedown(function() 
    isDragging = false;
)
.mousemove(function() 
    isDragging = true;
 )
.mouseup(function() 
    var wasDragging = isDragging;
    isDragging = false;
    if (!wasDragging) 
        $("#information").toggle();
        $("#clicktoshow").toggle();
    
);

SOURCE

【讨论】：

【参考方案4】：

您可以检查“信息”div 是否已切换：

function toggleInfo() 
    if(document.getElementById('information').style.display == 'none')
         $("#clicktoshow").toggle();
         $("#information").toggle();
    else  
       // do nothing

查看此Fiddle

【讨论】：

【参考方案5】：

TLDR

演示：http://jsfiddle.net/5472ja38/

代码（当文本突出显示/选择时取消点击事件）：

document.getElementById('information').addEventListener('click', (e) => 
  const cellText = document.getSelection();
  if (cellText.type === 'Range') e.stopPropagation();
)

说明

document.getSelection().type 检查文档对象级别是否有任何文本被突出显示。如果是，type 属性等于 'Range' 停止事件传播，这将取消单击切换按钮更改。

取自MDN

描述当前选择类型的 DOMString。可能的值是：

无：当前未进行任何选择。

插入符号：选择是折叠（即插入符号放置在某些文本上，但没有范围被选中）。

范围：已选择范围。

【讨论】：

【参考方案6】：

另一种方法是使用所选内容的 isCollapsed 属性。根据MDN，如果选择的开始和结束相同，则返回 true（单击为 true）：

document.getElementById('information').addEventListener('click', (e) => 
    if (!window.getSelection().isCollapsed) 
        return;
    

    // do something here
);

【讨论】：

以上是关于html网页中，ONCLICK事件时，在指定DIV中打开外部JS文件，怎样实现？的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript学习-事件响应，让网页交互

使用脚本设置 onclick 事件

选择文本时防止 onClick 事件

html的div区域如何响应onclick事件?

js或者jQuery怎样得到指定div下的指定a标签

onclick 事件与对象