标签: javascript-events

我正在使用最新的Google分析代码:

(function(i,s,o,g,r,a,m){  
    i['GoogleAnalyticsObject']=r;
    i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
         a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;
         a.src=g;m.parentNode.insertBefore(a,m) })
      (window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'XXXXXXXXX', 'XXXXXXXX');   
      ga('send', 'pageview');

我使用以下内容进行事件跟踪以处理下载链接:

<a href="#" onclick="ga('send', 'event', 'Download', 'PDF', 'FILE NAME');">

但是,它没有在mailto链接上工作 - 当我在控制台中查看它说请求已被取消.这就是我正在使用的:

<a href="mailto:email@address.com" onclick="ga('send', 'event', 'Contact', 'Email', 'Name here');">

当我删除"mailto"时,它将跟踪.

我设置错了吗？

编辑:如果我把一个target ="_ blank"看起来它会起作用 - 然而它会打开另一个不理想的窗口.

第二个编辑:它似乎与Chrome有关 - 我在Firefox和IE中测试过,当我这样做时它有效 - 其他人都经历过这个吗？

我正在尝试监听一个节点,其中某个类被动态地添加到DOM中.添加此节点后,我想向此节点添加插件的实例.我遇到的问题是DOMNodeInserted多次运行,然后在这个节点上运行我的插件多次导致问题.

页面上只出现过一次此类.

这是为什么我怎么能阻止这种情况发生？

    $(document).ready(function(){

    $('#editArea').live('DOMNodeInserted', '.class', function(e){

        $('.class').plugin({
            source: 'libs/ajax/somescript.php',
        });

    })

});

使用jQuery,您可以在任何jQuery对象上使用.on()/ .off()/ .trigger()方法,为您提供对事件系统的强大访问.我正试图在vanilla JavaScript中做类似的事情,但我一直在努力"TypeError: Illegal Invocation".我知道这个错误通常是指this在方法需要时丢失引用.使用.apply或.call似乎通常做的伎俩,但我仍然遇到问题.

具体来说,我正在尝试创建一个启用事件的"类",然后我可以扩展其他类,为我提供了一种在非DOM对象上侦听和触发事件的方法.(是的,我知道JS没有真正的类.我正在使用CoffeeScript,那就是那里使用的语法糖.)这是"类"函数,它创建一个新对象,其属性和值与传递给的对象相同构造函数,并提供了三种方法.apply()的方法从EventTarget.prototype.任何有关如何使这项工作的指导将非常感谢!

EventEnabled = (function() {
  function EventEnabled(obj) {
    var key, val;
    for (key in obj) {
      val = obj[key];
      this[key] = val;
    }
  }

  EventEnabled.prototype.addEventListener = function() {
    return EventTarget.prototype.addEventListener.apply(this, arguments);
  };

  EventEnabled.prototype.removeEventListener = function() {
    return EventTarget.prototype.removeEventListener.apply(this, arguments);
  };

  EventEnabled.prototype.dispatchEvent = function() {
    return EventTarget.prototype.dispatchEvent.apply(this, arguments);
  };

  return EventEnabled;

})();

当我尝试在EventEnabled的实例上调用这三个方法中的任何一个时,我得到一个"TypeError:Illegal Invocation".

感谢您对此有任何见解!

所以我希望能够弄清楚我的页面的哪个部分被点击了.无法保证元素全部出现在页面上,这意味着我需要使用像jquery delegate这样的东西.

一种方法是遍历DOM中的所有元素,然后将事件处理程序附加到每个元素 - 但这将是缓慢而复杂的 - 每次动态添加新的html时,我必须重新附加所有处理程序,或找出已添加的html的子集.

另一种方法是使用事件冒泡 - 所以向文档或正文添加一个事件处理程序并依赖于冒泡的事件

这样的事情

        $('body').delegate('div', 'click', function(e){
            dummyId++;
            console.log(e);
            console.log(e.currentTarget);
            console.log("=====");

        });

但是,在使用此代码后,当我单击页面上的按钮时,我得到了按钮周围的div,而不是实际的按钮.换句话说,上述内容太具体了.此外,我觉得原始选择器应该是文档,而不是body标签.

要清楚,我想知道何时在我的页面上点击任何元素 - 我该怎么做？

谢谢

所以我用.on尝试了这段代码

$(document).on('click', function(e){
    console.log("EVENT DUMMY ID");

    console.log(e.target);
    console.log("=====");

});

但是,当我点击我的应用程序中的按钮时,没有任何内容被触发 - 当我点击其他元素时,控制台日志会运行.

我知道如果没有更多背景,这可能很难回答 - 你还需要什么？

我想ng-keyup用来观察向上和向下箭头键并增加或减少输入中的值.这似乎应该是直截了当的,但这个小提琴不起作用:http://jsfiddle.net/a8tgW/3/

HTML

<div  ng-controller="MyCtrl">
  <input type="text" ng-model="minPotatoes" ng-keyup="onKeyup($event, minPotatoes)" />
  <input type="text" ng-model="maxPotatoes" ng-keyup="onKeyup($event, maxPotatoes)" />
</div>

JS

function MyCtrl($scope) {
  $scope.onKeyup = function (evt, val) {
    if(evt.keyCode === 40) {
      val -= 1
      console.log("decrementing val", val)
    } else if (evt.keyCode === 38) {
      val += 1
      console.log("incrementing val", val)
    }
  }
  $scope.minPotatoes = 2;
  $scope.maxPotatoes = 10;
}

我尝试过使用$apply,但摘要已在进行中.我已经阅读了这个问题,但是它使用了一个无法访问模型引用的外部监听器.

我可以直接引用范围值,而不是传入的值,但如果密钥处理程序不知道它正在影响的模型,它会更少耦合.

在Highcharts重绘动画完成时,有没有办法设置事件监听器？从我看到的情况来看,redraw事件会在更改时立即触发,而不会等待动画.或者也许还有其他方法可以在图表变得静止时等待？

此外,是否可以将事件监听器添加到已经呈现的图表中(例如,通过addEventListener,而不是通过JSON配置)？

我希望当选中表单(form1)的"是"单选按钮时,会出现一个新表单(form2),其中有两个单选按钮,其文本为"是"和"否".通过form1的"是"按钮中的"onclick"事件,我设法使用两个单选按钮显示新表单,但我无法显示其文本.由于单选按钮没有"innerHTML",我尝试将文本作为纯文本添加为​​"标签",但它不起作用.这是语法或逻辑中的问题(不可能与按钮同时创建文本)？谢谢您的帮助.

在我的HTML正文中,我有这个:

<form id="form1">
<input type="radio" id= "form1_no" value="no" checked>
   <label for = "form1_no" >No</label>
<input type="radio" id= "form1_yes" value="yes" onClick= exam()>
   <label for = "form2_yes" >Yes</label>
</form> 

功能考试()是:

<script type='application/javascript'>

function exam() {                  

    var inputno = document.createElement("input");
    inputno.type = "radio";
    inputno.id = "form2_no";
    inputno.value = "no";
    inputno.onclick = function () {alert("I select No in Form 2")}; 
    document.getElementById("form2").appendChild(inputno); // this is working

    var inputyes = document.createElement("input");
    inputyes.type = "radio";
    inputyes.id = "form2_yes";
    inputyes.value  ="yes";
    inputyes.onclick = function () {alert("I select …

我正在使用Ruby on Rails 4,我想以Rails的方式处理JavaScript事件.也就是说,例如,鉴于我有以下内容

link_to('destroy', article_path(@article), :method => :delete, :remote => true)

当我点击上面生成的链接时,我希望successJS事件通过删除已删除的文章DOM元素来更新页面内容.无论是什么,AJAX响应都应该被忽略.

我知道rails.js文件的存在,但我不知道如何使用它来完成我正在寻找的东西.

这是问题所在:

任何两个Polymer元素可能需要通信.没有假设这些元素在DOM(或阴影DOM)中的位置,这意味着一个事件不能简单地冒泡到另一个元素.

实现这一目标的好方法是让事件冒泡到根节点,然后在根节点上触发广播事件以供其他元素监听.

然而,这种方法打破了封装,似乎违背了Polymer的整体设计.例如,AngularJS提供了一个事件广播器,可以防止控制器不必要地保留对根节点的引用.

这种方法可以通过聚合物实现吗？否则可以用不同的方法解决这个问题吗？

我不确定这里的bug是什么.我json在每个选择上从服务器获得select box.根据json我正在创建新的表单元素.在第一次选择时,一切正常.但第二个不会触发我的事件处理程序.

$('#planned_process').on('change', function(e){
  var $this = $(this);
  var parent = $(this).parents('.form-group').next();

  // if (e.added){
  $('.inserted-elm').remove();
  console.log('selected process :', $this.val());

  record = {
    ...,
    "tags":[
      "dummy-tag"
    ],
    "priority":1,
    "is_valid":true,
    "planned_start_time":"2014-01-01T21:01:00",
    "selected_recipies":[

    ],
    "planned_duration":"23",
    "created_date":"2014-08-19T06:45:15.669",
    "planned_input":[

    ],
    "last_editor":[
      "",
      ""
    ],
    "planned_output":[

    ],
    "created_by":[
      "",
      ""
    ],
    "planned_resources":[

    ]
  };
    _.each(record, function(val, key){
      var nameType = 'planned-process-disabled';
      var type = 'text';
      var elm = '<!-- start of element -->' +
          '<div class="form-group inserted-elm has-error"' + …