标签: dom-events

我有一个如下所示的反应应用程序：我有一个按钮，单击它时它将打开一个弹出窗口，其中包含要打印的票证，单击处理程序从父组件传递到按钮，我希望完成相同的过程在父组件内部

export default class ParentComponent extends Component {
  openWindow = id => {
    window.open('/service/ticket/' + id + '/print')
  }

  submitPayment = () => {
    sendPayment(this.state.rawCommand.id, updatedCommand.payment) 
      .then(payment => {
        if (payment.needed > 0) { 
          toastr.success(dictionnary.acceptedPayment)
        } else {
          toastr.success(dictionnary.payee) 
          this.openWindow(updatedCommand.id)
        } 
      }

  render () {
    <Printer printTicket={this.openWindow} />
  }
}

和

const Printer = ({printTicket, id}) => {
  const clickHandler = () => printTicket(id)

  return (
    <button onClick={clickHandler}>print</button>
  )
}

问题是，当单击 Printer 组件中的按钮时，窗口会按预期打开，但是当从父组件调用 openWindow 单击处理程序时，什么也没有发生！

我检查了 chrome devtools 中的代码，该函数被调用，但弹出窗口未打开。

编辑 …

我正在使用量角器 - Javascript 运行自动化测试..我试图从表格格式的 UI 中获取值..

我编写了如下脚本。问题是当我进入“i”循环时。它正在获取“i”的所有值，而不是“i”的第一个值，而不是继续进行“j”循环。

然而，一旦i循环完成......它会正确地进入下一个循环j，k其中j&k循环按预期工作（根据其他编程语言中的通用循环标准）。

    this.cate = function () {
    let acct = [];
    return this.getCountOfCate().then((values) => {
        for (let i = 0; i < values; i++) {
            openAccounts.push(browser.findElement(locators.someField).getText());
            this.getRowCount().then((rowValues) => {
                console.log('rowValues is' +rowValues);
                for (let j = 0; j < rowValues; j++) {
                    this.getColumnCount().then((columnValues) => {
                        for (let k = 0; k < columnValues; k++) {
                            acct.push(element.all(classes.accountReports).all(by.css(getAccountCategoryCnt(i))).all(by.css('.title')).get(j).all(by.css('td')).get(k).getText());
                        }
                    })
                }
            });
        }
        return acct;
    }); …

我是初学者，我刚刚尝试这样做：

ul.addEventListener("click", function(e) {
  console.log("Hi");
});

这有效。据我所知，这是一个匿名函数。然而，当我尝试事先给出这个函数的定义并像这样传递它时，它不会工作：

function myFunc(e) {
  console.log("Hi from myFunc");
}

ul.addEventListener("click", myFunc(e));

我不明白有什么区别。错误如下：

未捕获的引用错误：e 未
在 javascript.js:29 处定义

我想将参数传递给 Javascript 中的事件侦听器。我找到了解决方案，但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用。

我有 C/C++ 背景，但是 Javascript 函数的执行有很大不同。您能否帮助我理解以下示例如何以及为何有效或无效？

没有参数，代码可以正常工作：

var clicker = document.getElementById("mainNavToggle");
clicker.addEventListener("click", eventFunction);

function eventFunction()
{
  console.log("works");
}

如果我在 eventListener 上包含括号，该函数将在没有事件触发的情况下执行一次，然后不执行任何操作：

var clicker = document.getElementById("mainNavToggle");
clicker.addEventListener("click", eventFunction());

function eventFunction()
{
  console.log("works");
}

我想这是因为该函数是在 eventListener 处调用的，并且这不允许 eventListener 函数稍后调用 eventFunction。

当我想用 eventFunction 传递参数时。以下不起作用：

var clicker = document.getElementById("mainNavToggle");
clicker.addEventListener("click", eventFunction("works"));

function eventFunction(myStr)
{
    console.log(myStr);
}

它在不触发事件的情况下调用 eventFunction，然后当事件触发时不执行任何操作，这与之前的行为相同。到目前为止我想我能理解。

为了在事件函数中正确传递参数，我找到了以下代码。以下解决方案工作正常：

var clicker = document.getElementById("mainNavToggle");
clicker.addEventListener("click", eventFunction("works"));

function eventFunction(myStr)
{
  function func(event, myStr)
  {
    console.log(myStr);
  }

  return function(event) { 
    func(event,myStr) 
  };
}

我注意到的第一件事是这个 eventFunction …

我正在创建一个离子应用程序，当我单击卡片时会触发模式，我面临的问题是，当我单击卡片上的按钮时，模式也会打开，我该如何阻止这种情况发生。我对任何解决方法持开放态度，因为我已经被困在这个问题上有一段时间了。下面是一些有用的代码和图片：

//html
  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let item of exercises">
        <ion-card class="exercise-card" (click)="openModal(item.id)">
          <img [src]=item.image class="image-card">
          <h3 style="font-weight: bold;">{{item.name}}</h3>
          <h5>{{item.sets}} sets of {{item.reps}} reps and {{item.remarks}}</h5>
          <h6>{{item.date | date: 'dd/MM/yyyy'}} ({{item.time}})</h6>
          <br>
          <div style="text-align: center;">
            <ion-button size="medium" style="width: 30%;" color="success" (click)="complete(item)">
              <ion-icon slot="icon-only" name="checkmark-outline"></ion-icon>
            </ion-button>
            <ion-button size="medium" type="submit" style="width: 30%;" [routerLink]="['/edit-exercise', item.id]">
              <ion-icon slot="icon-only" name="create-outline"></ion-icon>
            </ion-button>
            <ion-button size="medium" style="width: 30%;" color="danger" (click)="delete(item)">
              <ion-icon slot="icon-only" name="trash-bin"></ion-icon>
            </ion-button>
          </div>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

该模式仅应在以下情况下触发： 单击此页面上的卡片：

。

但当我单击蓝色编辑按钮时它也会触发：

。

我在以下 google chrome 页面上：chrome://history/?q=a

我有一个结果列表，我想确保通过浏览器控制台选择所有复选框。

我已经尝试过这些方法，从这里获取提示，但它似乎不起作用：

[].forEach.call( document.querySelectorAll('input[type="checkbox"]'),function(el){
       el.checked=true;
     }
);

[].forEach.call( document.querySelectorAll('cr-checkbox#checkbox.no-label'),function(el){
       el.checked=true;
     }
);

谁能帮我吗？

我找不到错误。你得到一个吗？

您会看到一个对象定义为具有 3 个方法的对象：gt(get)、add(add)、rm(remove)。之后，我添加了一个事件处理程序 ( Ev)，只做了一件事：将其加载到页面加载上并将单击事件添加到元素 ( elm)。

var Obj = {
  gt: function(elm) {
    if (typeof === "string") {
    return document.getElementById(elm);  
    } else {
      return elm;
    }
  },
  add: function(elm, dst) {
    var elm = this.gt(elm);
    var dst = this.gt(dst);
    dst.appendChild(elm);
  },
  rm: function(elm) {
    var elm = this.gt(elm);
    elm.parentNode.removeChild(elm);
  }
};

var Ev = {
  add: function () {
    if (window.addEventListener) {
      return function(elm, type, fn) {
        Obj.gt(elm).addEventListener(type, fn, false); …

我在“keypress”事件上有一个事件侦听器：

input.addEventListener("keydown", function(e) { ... }

当我读取输入字段的值时，它尚未更新。有没有办法在等待“keyup”事件之前知道输入的值是多少？

注意：我尝试使用 asetTimeout(function() { ... }, 1);但它不适用于复制/粘贴（输入值未更新）。当我将超时设置为 10 毫秒时，它在我的测试中确实有效，但感觉它不是一个强大的解决方案（可能取决于硬件的速度）。

已弃用的 CustomEvent.initCustomEvent() 如何替换以改进旧代码。

我创建了事件监听器来执行一个功能,当用户拖动一个标记但它不起作用时,任何人都可以帮助我吗？

这是事件监听器

google.maps.event.addListener(marker, 'dragend', enviarParaASP(marker));

功能:

function enviarParaASP(marcador) {
            coordenadaASalvar = { latitude: marcador.position.d, longitude: marcador.position.e };

            jQuery.ajax({
                url: 'GoogleMapsGeolocation.aspx/SalvaCoordenadas',
                type: "POST",
                data: JSON.stringify({'coord': coordenadaASalvar}),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) { alert("OK "); },
                failure: function (msg) { alert("Sorry!!! "); }
            });

我知道 JavaScript 本质上是同步的。因此，当我使用 Web API 调用函数时，它会同步执行：

setTimeout(function(){
  console.log('1');
}, 2000);

console.log('2');

它将打印“2”然后是“1”。

但是当我运行像 for 循环这样的循环并增加迭代时，它会同步执行：

var first = function(){
    for(var i=0;i<=100000000;i++){
        if(i==100000000){
            console.log('first')
        };
    };
};

var second = function() {
    console.log('second')
};

var a = function() {
    first();
    second();
}

a();

它将分别打印第一秒。

那么，JavaScript 是否与本机代码同步执行？