JavaScript点击函数？

Posted 2023-03-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript点击函数？相关的知识，希望对你有一定的参考价值。

我想通过点击事件修改src属性，为什么js里我这样写点击没有任何反应？
把图片保存到电脑才能看清楚。

你这个left和center分别来自不同的框架（或者说一个在父页面，另一个在子框架），所以你不可能都用document.getElementById去获取。另外，你这个js.js也不应该在父页面和子框架内都运行，应该只放在一个子框架内运行，比如放在left，那么代码就应该是：

var left = document.getElementById("left");

var center = parent.document.getElementById("center");

parent代表当前frame所在的父页面

顺便说一句，现在早已经不流行用frame来做网页了，弊端很多。应该在同一个页面通过css布局来划分不同区域，这样会大大减轻编程难度，减少网络资源占用，提高网站运行效率，关键是这样做网页也会更美观。作为初学者，除非是完成作业需要，否则我建议你不要在这方面花太多时间，略微了解一下即可。

追问

我把它们都放到一个文件夹里，测试还是不行

追答

left的id已经被你改为lefts，所以代码也要改为

var left = document.getElementById("lefts");

另外，这跟它们是不是在同一个文件夹没有半毛钱关系，看来你没有理解我说的意思。我的意思是说，

这一行只能放在left_sop.html中，在另外三个文件中都要删掉！也就是说js.js只能在left_sop.html中运行。

参考技术A 因为 document.getElementById(); 这样只能获取到你引入 js 或者在你写js代码的html页面中的元素，结合你的代码来说就是，不管你在四个页面中的哪一个页面中引入你写好的js文件，或者是把js代码直接复制到四个页面中的任何一个页面的script标签中，都是错误的，代码都不能正确执行。
原因之一就是我上面说的， document.getElementById() 这个方法只能获取你js所在页面中的标签，如果你把js放在 sop.html 页面中，document.getElementById('center') 这行代码是无效的，获取不到任何元素，因为 sop.html 页面中没有 id 为 center 的标签，你想获取的是 id 为 center 的 frame 标签，可它不在 sop.html 页面中啊，所以是获取不到的。
而你在 attribute.html 和 test.html 页面中使用那段js代码，不但达不到效果，还会报错，因为这两个页面中都没有 id 为 left 和 center 的标签，获取的结果是 null ，给null添加 onclick 事件是会报错的。
而在 h 开的html页面中，即使你给第一个 frame标签添加上一个left的id，代码依然不能成功执行，因为 frameset 标签和 frame 标签只支持添加 onload 和 onunload 事件，其它事件都不支持，onclick 自然也是不支持的。

另外，frameset 标签现在已经被废弃了，所以你现在这样写是会有很大的兼容问题的，还有，frameset 要配合专门的 dtd 头，直接用 <!doctype html> 这个是不行的。本回答被提问者采纳参考技术B $(function() 写在这个里面的代码,只要你把JS引入JSP或者是HTML,那么一打开页面就会执行 ) 希望我的回答能帮到你。参考技术C

你确定是点击的问题吗，我感觉你这个center都没有拿到啊.

这句document前边加个parent试试。（parent.document）

参考技术D 我觉得把你要确认一下Src属性是否可以直接通过center这个dom对象直接改变，你可以在控制台里面拿到这个dom试一下

如何在点击事件函数中更新 Javascript 全局变量

【中文标题】如何在点击事件函数中更新 Javascript 全局变量【英文标题】：How to update Javascript global var inside a click event function 【发布时间】：2013-08-17 01:18:15 【问题描述】：

使用 Javascript 和 jQuery，我正在尝试获取单击事件的鼠标坐标以在其他 Javascript 函数中使用。我的问题是在事件函数中设置的全局变量似乎不会在函数外部更新，就像其他函数中的全局变量一样。例如，如果我有以下全局变量声明和事件函数来跟踪 ID 为“clickable_area”的 div 中的鼠标坐标：

var mouseXPos = 0;
var mouseYPos = 0;
$(document).ready(function()
  $("#clickable_area").click(function(e)
    mouseXPos = e.pageX;
    mouseYPos = e.pageY;
  );
);

...除非我将处理 mouseXPos 和 mouseYPos 的所有代码都放入事件函数本身，否则这两个变量在下一个事件发生之前不会更新并且在事件函数之外可用。例如：

function displayCoordinates() 
console.log("mouseXPos = " + mouseXPos + " and mouseYPos = " + mouseYPos);

...产量：

>>mouseXPos = 0 and mouseYPos = 0

关于如何让这两个全局变量在函数被触发后更新的任何建议，或者我只是遇到了 Javascript 的固有设计需求？我可以使用回调队列来促进这一点吗？我可以改为跟踪“mousemove”事件，它工作正常，但我不希望不断跟踪鼠标移动的开销。

【问题讨论】：

您编写的代码看起来应该可以工作。您是否在单击之前记录了鼠标位置？你在哪里调用 displayCoordinates？ Shenanigans 所有这些都只是假设。我正处于一个项目的设计阶段，并且我预见到几个实例，在这些实例中，让不同的函数共享点击事件数据而不必在事件函数本身内部是理想的。函数内更新的全局变量可以在函数外共享，但这似乎不适用于诸如 this 的事件函数。 【参考方案1】：

如果你坚持使用Global Variables（我认为这是个坏主意）试试这个。将它们指定为window.mouseXPos = 0，然后将它们简单地调用为mouseXPos。但是，在函数加载范围之外分配它们应该使它们成为全局的，使用 window. 将确保这样。

看我的例子：

jsFiddle

JS

<script type="text/javascript">
    window.mouseXPos = 0;
    window.mouseYPos = 0;

    $(function()  // <-- Same as `$(document).ready(function()`
        $(document).on('click', '#clickable_area', function(e) 
            mouseXPos = e.pageX;
            mouseYPos = e.pageY;
        );
    )
</script>

【讨论】：

以上是关于JavaScript点击函数？的主要内容，如果未能解决你的问题，请参考以下文章

d3 javascript点击函数调用

我可以在 JavaScript 点击处理程序中调用 PHP 函数吗？

javascript confirm()函数的用法

如何创建 Javascript 函数来管理（Bootstrap）下拉菜单点击，而不是创建大量侦听器？

Autohotkey - 使用DOM，触发javascript函数

javascript的事件响应