标签: dispatchevent

我正在开发一个使用事件的应用程序。应用程序的模块在单独的容器中执行，我考虑使用代理来驯服被触发的事件。但是，我似乎无法dispatchEvent接受已代理的事件。

以下失败：

let event = new CustomEvent('my event');
let eventProxy = new Proxy(event, {});
let eventTarget = document.createElement('div');

try {
    eventTarget.dispatchEvent(eventProxy); // VM134:4 Uncaught TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'
} catch(error) {
    console.log(error.message);
}

任何人都有任何想法如何dispatchEvent才能接受代理？

我需要以编程方式从 Google Colab 菜单“运行时”运行某些命令“运行全部”。它没有任何明显的“onclick”事件处理程序，我可以从该页面上的 JavaScript 代码调用它。页面上的其他“div”可以从js调用，例如，我可以使用js代码连接到运行时：

document.querySelector('#top-toolbar > colab-connect-button').shadowRoot.querySelector('#connect').click();

运行时菜单是一个下拉菜单，我尝试了其中的.click()每个项目，但没有效果。<div>

此外，“运行全部”命令有一个热键Ctrl + F9，但向document元素分派事件没有效果。但我可以Enter使用以下代码将命令发送到笔记本内的任何输入字段：

document.querySelector('input.raw_input').dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}))

使用 Chrome 代码检查器，Ctrl + Shift + I我查看了“Run all”命令，它看起来像：

<div command="runall" class="goog-menuitem" role="menuitem" id=":1w" style="user-select: none;"><div class="goog-menuitem-content" style="user-select: none;">Run all<span class="goog-menuitem-accel">Ctrl+F9</span></div></div>

因此，我在页面上检查器代码的“源”选项卡内进行搜索，并在https://colab.research.google.com/v2/external/external_polymer_binary.js文件中发现“runall”的出现：

, Eja = X(new W({
        id: "runall",
        description: "Run all cells in notebook",
        shortcut: IG(120)

F9顺便说一句，120 - 是按钮的键码。我还发现我认为所需菜单项的确切位置被称为：

        case "runall":
            d.runAll();
            break;

但我几乎不可能理解它是什么d.以及它的参考在哪里！

我还发现了许多其他有趣且有用的命令，例如this.notebook.getKernel().isRunning()or …

我在Windows 8.1上使用PhantomJS 1.9.7,输入用户名和密码后我会点击Login按钮.我可以写用户名和密码但是,当我想让PhantomJS点击按钮时,它可以找到该元素,但无法点击它.我在之前的帖子中发现我需要创建事件并使用"dispatchEvent".我做到了但是我得到了如下错误:

TypeError:'undefined'不是函数(评估'elm.dispatchEvent(event)')

我也试图从EventListener获得帮助,但我得到了相同的错误.

如何点击元素？

var page = require('webpage').create();

page.open('URL', function() {
    var submitButton = enterUserAndPassAndLogin();      
    click(submitButton);
    phantom.exit();
});

function enterUserAndPassAndLogin() {
    var element = page.evaluate(function()  {
        document.querySelector('input[name="username"]').value = "*******";
        document.querySelector('input[name="password"]').value = "*******";
        return document.getElementsByTagName("Button");
    });
    return element;
}

function click(elm) {
    var event = document.createEvent("MouseEvent");
    event.initMouseEvent("click", true, true, window,
        0, 0, 0, 0, 0, false, false, false, false, 0, null);
    elm.dispatchEvent(event);
}

我得到奇怪的行为，其中我试图分派的 Javascript 事件没有被解释为事件，而当我检查它是Event.

然后它失败并出现以下错误：

未捕获的 InvalidStateError：无法在“EventTarget”上执行“dispatchEvent”：提供的事件为空。

JSFiddle

我一定在这里遗漏了一些明显的东西。

$(function () {
    $("[type='tel']").keydown(function (event) {
        var position = this.selectionStart;
        var $this = $(this);
        var val = $this.val();
        if (position == this.selectionEnd &&
            ((event.keyCode == 8 && val.charAt(position - 1) == "," && val.substr(0, position - 1).indexOf(".") == -1)
            || (event.keyCode == 46 && val.charAt(position) == "," && val.substr(0, position).indexOf(".") == -1))) {
            event.preventDefault();
            if (event.keyCode == 8) {
                $this.val(val.substr(0, position - 2) + val.substr(position));
                position = position - 2; …

我有此代码，已将MessageEvent的原点设置为*，但控制台仍提示阻止原点为“ AAAA”的框架访问原点为“ BBBB”的框架。协议，域和端口必须匹配。有人知道为什么吗？

  var size = {
    width:  document.body.scrollWidth,
    height:  document.body.scrollHeight
  }
  var evt = new MessageEvent("dimensionMessage",{
      "data": size,
      "origin":"*"
  });
  window.parent.dispatchEvent(evt);

但是，如果使用window.parent.postMessage(size, "*")，它会起作用。

开发 Angular / TypeScript 应用程序，其中我们有一个自定义的基本文本编辑器。

尝试适当地处理用户突出显示的选择然后按下按键以替换该选择的情况。

为了解决这个问题，我们需要在插入其预期内容之前正确删除他们选择的“隐藏”组件。

我最初的想法是：

1. 捕获KeyDown事件
2. 检查是否选择了突出显示的范围
3. 如果是，则删除所有选定的内容
4. 重新调度 KeyDown 事件，以便插入适当的内容

这是我们方法的截断版本onKeyDown：

cloneKeyboardEvent(eventToClone): KeyboardEvent {
    return new KeyboardEvent(eventToClone.type, {
        key: eventToClone.key,
        code: eventToClone.code,
        location: eventToClone.location,
        ctrlKey: eventToClone.ctrlKey,
        shiftKey: eventToClone.shiftKey,
        altKey: eventToClone.altKey,
        metaKey: eventToClone.metaKey,
        repeat: eventToClone.repeat
    });
}

onKeyDown($event: KeyboardEvent) {
    // Check if there's a selection
    if (this.isSelectionRange) {
        Helpers.stopEvent($event);

        // Delete components in selection
        this.deleteComponentsInSelection($event);

        const clonedEvent = this.cloneKeyboardEvent($event);
        document.dispatchEvent(clonedEvent);

        return true;
    }
}

一切正常到#4。

该clonedEvent事件与原始事件匹配，但不会触发。debugger我在 的开头插入了 a onKeyDown()，它只在初始按键时被击中一次，而不是在 …

您知道当您使用移动设备并向下滚动具有谷歌地图的网页时.地图变暗并告诉您"用两根手指移动地图".

我想在我的Leaflet地图中实现这一点.Leaflet目前不提供此类功能.

Google将此功能称为手势处理.如果将其设置为"Cooperative",您将获得我刚才描述的效果. https://developers.google.com/maps/documentation/javascript/interaction

很容易检测到正在使用的手指数量并显示消息,如我的代码示例所示.(您需要在移动设备或模拟器上运行此功能才能看到它有效)

如果它是1个手指我取消touchmove事件并显示我的警告.否则,我允许该事件应用于地图.但是我需要弄清楚在我在地图上取消它之后将一个手指触摸事件应用到包含页面的方法.这样用户就可以滚动页面了.

有没有人有任何好的想法如何实现这一目标？我想过使用dispatchEvent将收到的touchmove事件对象直接中继到父文档.例如:document.dispatchEvent(touchmoveevent); 但没有运气.也许有更好的整体方法.

var myMap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19
}).addTo(myMap);

$("#mapid").on("touchmove", function(e) {
  if (e.touches.length !== 2) {
    $('.mask').fadeIn();
    return false;
  }
});

$("#mapid").on("touchend", function(e) {
  if ($('.mask').is(':visible')) {
    $('.mask').fadeOut();
  }
});

#mapid {
  height: 600px;
}

.mask {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  z-index: 400;
}

.message {
  color: #ffffff;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%; …

我正在尝试从自定义ItemRenderer调度自定义事件

这是我的自定义事件

package events
{
    import customClass.Product;

    import flash.events.Event;

    public class CopyProductEvent extends Event
    {
        public static const COPY_PRODUCT:String = "COPY_PRODUCT";
        public var picked:Prodotti;

        public function CopyProductEvent(type:String, picked:Product)
        {
            super(type);
            this.picked = picked;
        }
    }
}

在itemRenderer中,我有一个函数来执行此操作:

        private function sendEvent(o:Product):void
        {
            dispatchEvent(new CopyProductEvent(CopyProductEvent.COPY_PRODUCT,o));
        }

在主应用程序中我有一个spark List,我试图将EventListener添加到应用程序和列表本身,但它们永远不会被调用...

    this.addEventListener(CopyProductEvent.COPY_PRODUCT,
        function(e:Product):void{
            ...
    });

    list.addEventListener(CopyProductEvent.COPY_PRODUCT,
        function(e:Product):void{
            ...
    });

为什么？!？我哪里做错了？

函数中的事件正确发送...我无法拦截它..

我需要以ErrorEvent编程方式触发,但无法弄清楚如何初始化事件的属性.这些属性是只读的,initEvent()只是初始化事件类型,是否有气泡,以及是否可以取消.

我试过了

var myErrorEvent = new ErrorEvent("error", new Error("This is my error"));

和

myErrorEvent.initEvent("error", false, true, new Error("This is my error"));

要么

// This function would be defined in IE only. Could not find it in Chrome.
myErrorEvent.initErrorEvent("error", false, true, "This is my error", "myfile.js", 1234);

我尝试了很多其他的东西,但无法ErrorEvent正确设置属性.

这甚至可行吗？

我正在尝试在ExtJs中的app构建中模拟鼠标事件,如click,mouseover等.我正在使用下面的代码来模拟点击,

function triggerEvent(element, eventName)
{
    if (document.createEvent)
    {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent(eventName, true, true);

        return element.dispatchEvent(evt);
    }
}

var btn = document.getElementById("loginButton");

triggerEvent(btn, "click");

这适用于chrome和firefox,但从不适用于IE9和IE10.如果我使用btn.fireEvent('onlclick'),那么它在IE9中工作正常(未在IE10中检查).IE9和IE10支持document.createEvent,但我不确定为什么我的代码无效.

我想禁用某些区域的调度触摸,以便您理解这里是我的屏幕.

您可以在图像中看到页眉,页脚和Mapview,但是当我点击位置按钮(标题中的右侧)时,我的地图也会收到通知(就像它被触摸),这是我不想要的.我希望只有按钮的onClick事件才能被点击而不是发送事件.

这是我的XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<!-- include title bar for all screen -->

<include
    android:id="@+id/include1"
    layout="@layout/titlebar_layout"
    android:layout_gravity="top" />



<FrameLayout
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.88" 
    >

    <com.google.android.maps.MapView
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.63"
        android:apiKey="0VkXbAOFvAq7b6uaGHSmnS2a2VosPxoS6ceHY_g"
        android:clickable="true" >
    </com.google.android.maps.MapView>


</FrameLayout>

<include
    android:id="@+id/include2"
    android:layout_gravity="bottom"
    android:layout_marginBottom="38dp"
    layout="@layout/bottom_layout" />

</LinearLayout>

任何帮助将不胜感激.

为视频元素创建包装器。

function YMplayer() {
    this.video = document.getElementById("video"); /* video object */
    this.addEvents();
}

YMplayer.prototype.addEvents = function () {
    var obj = this.video;
    var events = ["load","click"];

    if (obj) {
        if (obj.addEventListener) {
            for (var i in events) {
                obj.addEventListener(i, this.dispatch(i), false);
            }
        } else if (obj.attachEvent) {
            for (var j in events) {
                obj.attachEvent("on" + j, this.dispatch(j));
            }
        }
    }

};

/* Method to dispatch the events */

YMplayer.prototype.dispatch = function (evt) {
    var evtt = document.createEvent("Events");
    evtt.initEvent(evt, true, false); …