Javascript:使用 onclick 事件回调属性-6ren

Javascript:使用 onclick 事件回调属性

转载作者：行者123 更新时间：2023-12-02 23:09:53

24

4

因为我有 2 个动态生成的 textarea 并且我需要成对调整它们的大小。如何让此回调函数与 onclick 事件一起使用？我认为这是一个基于谷歌搜索的范围界定问题。

function syncSize(master, puppet) {
  // Create a temporary callback that uses the puppet and master	
  let sync = function() {
    let height = master.offsetHeight - 6;
    puppet.style.height = `${height}px`;
  }
  
  // Return a new observer with the callback that listens to the master
  return new MutationObserver(sync).observe(master, {
    attributes: true,
    attributeFilter: ["style"]
  });
}

//this will work if uncommented
//syncSize(left, right)
//syncSize(right, left)

//syncSize(left1, right1)
//syncSize(right1, left1)

textarea{
  resize: vertical;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<textarea id="left" onclick="syncSize(left, right)">Resize me</textarea>
<textarea id="right" onclick="syncSize(right, left)">I sync</textarea>
  <br/>
<textarea id="left1" onclick="javascript:syncSize(left1, right1);">Resize me</textarea>
<textarea id="right1" onclick="javascript:syncSize(right1, left1);">I sync</textarea>
</body>
</html>

如果建议 jquery mousemove，由于限制，我不想使用它 here .

最佳答案

类似这样的事情吗？

function create(master, puppet){
  function sync(){

    puppet.style.height = master.style.height
    puppet.style.width = master.style.width
  }
  var obs;
  try {
    obs = new ResizeObserver(sync)
    obs.observe(master);
  } catch {
    obs = new MutationObserver(sync)
    obs.observe(master, {
      attributes: true,
      attributeFilter: ["style"]
    });
  }
  master.onmouseup = () => {
    obs.disconnect();
    master.onmouseup = () => null
  }
}

textarea{
  resize: vertical;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<textarea id="master" onmousedown="create(master, puppet)">Resize me</textarea>
<textarea id="puppet" onmousedown="create(puppet, master)">I sync</textarea>
  <br/>
<textarea id="left1" onmousedown="create(left1, right1);">Resize me</textarea>
<textarea id="right1" onclick="create(right1, left1);">I sync</textarea>
</body>
</html>

关于Javascript:使用 onclick 事件回调属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57419200/

24

4

0

文章推荐： javascript - JS::First Class Functions::参数值困惑

文章推荐： java - JAVA + Azure Functions 中的依赖注入(inject) (IoC)

javascript - 为什么从response.on ("end"，回调)打印数据与从response.on ("data"，回调)打印数据不同？
我正在研究 learnyounode 的 HTTP 客户端作业。我想知道为什么控制台记录来自response.on(“end”，callback)的数据仅输出预期输出的最后一部分，而控制台记录来自r
安卓线程/回调
我正在尝试创建一个对象列表(在我的示例中为 List)，我在其中使用 json 将对象添加到此列表，但该列表仍为空。这是我的代码: public List readCardsFromJson() {
JavaScript 回调
我有一个 JavaScript 函数“print_something”，它在大约 300 个 jsp 帮助页面中实现。我发现这个“print_something”函数必须被纠正。所以我正在寻找一个不更
使用循环舍入值的Javascript函数..回调？
有 2 个 HTML 下拉列表，一个用于 12 小时时间，一个用于每小时 5 分钟的时间间隔。 .. 1 .. 12 .. 0 .. 55 .. 一直在尝试使用 if/
不同类之间非静态函数的C++回调
我有一个 A 类，我打算在它与设备驱动程序交互时将其放入共享库中。我有一个 B 类，将来可能是 C、D、E...，它将使用共享库中的 A 类。我想要在类 A 中设置回调函数的功能，以便当特定事件发
下一个可观察后的 Angular 回调
我需要能够在处理完 Observable.next() 之后执行回调。我有一个组件“A”，它有一个主题使用 Subject.next() 发送通知。我有一个组件“B”，它订阅了 Subject.as
行删除动画完成后的 UITableView 回调
我有一张在顶部和底部单元格下方带有阴影的表格(此处使用 Matt Gallagher 的解决方案:http://cocoawithlove.com/2009/08/adding-shadow-effe
javascript - react 回调
有人可以向我解释一下为什么这段代码有效 renderSquare(i) { return ( this.handleClick(i)} /> ); } 但
具有多个客户端的 WCF 回调
我可以让两个不同的客户端监听相同的 WCF 回调并让它们都接收相同的数据而不必进行两次处理吗？最佳答案不是真的 - 至少不是直接的。你所描述的听起来很像发布/订阅模式。 WCF 服务基本上在任何给
集线器操作后的 SignalR 回调
我是 SignalR 的新手，如果这个问题太明显，我深表歉意，但我在文档中找不到任何答案。这是我的代码。 /*1*/ actions.client.doActionA = function (r
Flutter 回调 - 从子列表中删除一个小部件
我有这个应用程序，您可以在其中输入一些文本并按下一个按钮，将此文本添加到自定义小部件中。这是代码: import 'dart:core'; import 'package:flutter/materi
运行交叉验证时的 Keras 回调
我读到当您还想使用模型回调时不能使用 Keras 进行交叉验证，但是 this post表明这毕竟是可能的。但是，我很难将其纳入我的上下文。为了更详细地探讨这个问题，我正在关注 machinelea
重力表单提交后的 jQuery 回调
我尝试在重力表单中提交表单失败后运行一些 jQuery 代码，也就是验证发现错误时。我尝试使用 Ajax:complete 回调，但它根本不触发。我尝试运行的代码基本上将监听器添加到选择下拉列表中
jquery - 回调.delay()
我有一个 $image，我 .fadeIn 和 .fadeOut，然后 .remove .fadeOut 完成。这是我的代码: $image .fadeIn() .fadeOut(func
文件对象关闭的 Python 回调
我正在处理一个自定义文件路径类，它应该始终执行一个函数写入相应的系统文件及其文件对象后关闭。该函数将文件路径的内容上传到远程位置。我希望上传功能完全在用户的幕后发生透视，即用户可以像使用其他任
javascript - 在for循环中解析查询(回调)
这里是 javascript 新手，所以回调在我的大脑中仍然有点不确定。我想做的是:给定一个“菜单”，它是一个 objectId 数组，查询与该 objectId 相对应的每个 foodItem，获
javascript - 回调 - 第二次回调后出现错误
我正在学习回调，我编写了以下代码: var http = require('http'); var str = ""; var count = 2; function jugglingAsync(ca
带有参数和返回值的 Javascript 回调
这是我的困境，我有一系列被调用的函数，我正在使用回调函数在它们完成时执行函数。回调返回一个值并且效果也很好，我的问题是当我向回调添加参数时我无法再访问返回值。这是一个有效的例子: function m
c++ - 回调:将函数指针作为参数并传递一个附加参数
This question already has answers here: Explanation of function pointers (4个答案) 上个月关闭。如何将函数指针作为参数传递
Javascript 回调 - 将变量传递给它们
我无法让以下代码工作。假设 ajax 调用有效，并且 msg['username'] 预设为 'john'。我想我对如何将变量传递给回调感到困惑。编辑:我认为我的主要困惑是如何从 Ajax 中获取“m

首页

博学

6Ren·AI

商城

Javascript:使用 onclick 事件回调属性