标签: javascript-events

在jQuery文档的.toggle()方法规定:

提供.toggle()方法是为了方便起见.手动实现相同的行为是相对简单的,如果.toggle()中内置的假设证明是有限的,这可能是必要的.

内置的假设.toggle已证明限制了我当前的任务,但文档没有详细说明如何实现相同的行为.我需要将eventData传递给提供给toggle()它的处理函数,但似乎只.bind()支持这个,而不是.toggle().

我的第一个倾向是使用一个全局的标志来存储单击处理函数来存储点击状态.换句话说,而不是:

$('a').toggle(function() {
  alert('odd number of clicks');
}, function() {
  alert('even number of clicks');
});

做这个:

var clicks = true;
$('a').click(function() {
  if (clicks) {
    alert('odd number of clicks');
    clicks = false;
  } else {
    alert('even number of clicks');
    clicks = true;
  }
});

我没有测试后者,但我怀疑它会起作用.这是做这样的事情的最佳方式,还是有更好的方式让我失踪？

谢谢!

我有以下包含下拉列表的HTML(单选)

        <script type="text/javascript">
            $(document).ready(function () {
                $("#garden").bind('change', function() {
                    alert("Changed");
                    });
            });
        </script>
    <body>
        <div id="content">  
           <select id="garden">
             <option value="flowers">Flowers</option>
             <option value="shrubs">Shrubs</option>
             <option value="trees">Trees</option>
             <option value="bushes">Bushes</option>                 
           </select>
        </div>
    </body>
</html>

呈现HTML页面Flowers时,默认情况下是下拉列表中已选中的元素(是第一个).如果我选择任何其他值("Flowers"除外),则会触发javascript函数并显示包含"Changed"的警告框.

Q1:但是,如果我再次重新选择Flowers,onchange则不会触发事件.我理解这是因为下拉列表中没有任何"更改".是否有一种方法可以触发功能,即使在下拉列表中没有更改已选择的值时也是如此？

Q2:如何提取刚刚选择的元素的值(即使没有选择任何新元素 - 也就是说,用户单击下拉列表,只需单击其他位置).

我已经尝试了"onblur",但这需要用户点击文档上的其他位置,以便下拉菜单失去焦点.任何帮助将非常感激.

非常感谢. [为了简洁起见,我在代码段中编辑了HTML标题和其他脚本内容.]

根据我的经验,我知道当用户点击链接时执行Javascript功能的三种不同方式

1. 使用onclick链接上的属性

   <a href="#" onclick="myfunction();return false;">click me</a>
   

   Run Code Online (Sandbox Code Playgroud)

2. 使用href链接上的

   <a href="javascript:myfunction();">click me</a>
   

   Run Code Online (Sandbox Code Playgroud)

3. 不要触摸链接,在js中做所有事情

   <a href="#">click me</a>
   

   Run Code Online (Sandbox Code Playgroud)

   (在Javascript中我们将停止默认事件,并调用该函数)

哪一个更好？有哪些优点和缺点？

编辑删除了"javascript:"onclick

我想在删除按钮上添加一个确认对话框,询问用户是否可以删除所选项目.

如果没有,则不会发生任何事情,否则应该执行url.

我知道如何通过一些JavaScript代码实现这一点,但我正在寻找一个代码较少的解决方案.我的意思是:

<a href="mysite.de/xy/delete" onClick="...">Delete</a>

是否可以将整个功能放在onClick元素中而不在标题中添加一些额外的javascript？

是否有一种方法可以捕获window.onbeforeunload确认对话框的结果,如Stack Overflow中的下一个(当离开'Ask Question'页面而不发布问题时会发生这种情况)？

这就是它在Chrome中的显示方式,我相信它在其他浏览器中略有不同,但你总是有某种形式的是/否按钮.

据推测,如果事件被触发后他们仍然在违规页面上,他们选择留下来,你可以通过观察js序列来解决这个问题.但是我想知道如何确定他们是否点击了"离开此页面"？

我已经实现了如下:

// concept taken from SO implementation
function setConfirmUnload(showMessage, message) {
    window.onbeforeunload = showMessage ? (message ? message : "this is a default message") : null;
}

// pseudo code
listen to changes on inputs
if any inputs fire a change event
   call setConfirmUnload(true, 'My warning message')

请注意我在我的网站中使用jQuery.

我本质上是在尝试实现像绘图实现一样的Gmail,其中如果用户离开带有表单的页面,他们已经进行了更改而没有保存,他们会使用类似的对话框加热.如果他们选择丢弃他们的更改并离开页面,我需要清理数据库中的一些临时记录(我正在考虑一个AJAX调用,或者只是提交带有delete标志的表单)然后在他们的路上发送它们.

我的问题还涉及:

在手动刷新后获取页面后,onunload处理程序中的jQuery AJAX调用触发.我如何保证首先发生onunload？

我正在尝试为移动触摸事件实现Google的"快速"按钮,而我似乎陷入困境.我正在尝试设置它以便我可以链接到快捷按钮,但我似乎无法使我的库结构正确.当我尝试在链接上运行for循环时,最终发生的是fastbutton重新进入.

我确定这只是我设置图书馆的方式.有人可以看看吗？谢谢!

http://code.google.com/mobile/articles/fast_buttons.html

    ;(function() {
/*Construct the FastButton with a reference to the element and click handler.*/
this.FastButton = function(element, handler) {
    console.log('fastbutton init');
    this.element = element;
    this.handler = handler;
    console.log(this);
    element.addEventListener('touchstart', this, false);
    element.addEventListener('click', this, false);
};

/*acts as an event dispatcher*/
this.FastButton.prototype.handleEvent = function(event) {
    console.log(event);
    switch (event.type) {
        case 'touchstart': this.onTouchStart(event); break;
        case 'touchmove': this.onTouchMove(event); break;
        case 'touchend': this.onClick(event); break;
        case 'click': this.onClick(event); break;
    }
};

/*Save a reference to the touchstart coordinate and start listening to …

我的页面上运行了一段JavaScript代码; 我们称之为func1.运行需要几毫秒.当该代码正在运行时,用户可以单击,移动鼠标,输入一些键盘输入等.我有另一个代码块func2,我希望在所有这些排队的输入事件都已解决后运行.也就是说,我想确保订单:

1. func1
2. 所有处理程序都绑定到func1正在运行时发生的输入事件
3. func2

我的问题是:在呼唤setTimeout func2, 0,在年底func1足以保证此排序,在所有现代浏览器？如果那条线在那个开始时出现怎么样func1？在那种情况下我应该期待什么？

请通过参考相关规范或测试用例来备份您的答案.

更新:事实证明,不,这还不够.我在原始问题中没有意识到的是,在执行当前代码块之前,输入事件甚至没有添加到队列中.所以,如果我写

// time-consuming loop...
setTimeout func2, 0

然后,只有在setTimeout运行之后,才会将在耗时循环期间发生的任何输入事件(点击等)排队.(为了测试这一点,请注意,如果在耗时的循环之后onclick立即删除回调,那么在循环期间发生的单击将不会触发该回调.)因此首先排队并优先.func2

设置超时1似乎可以解决Chrome和Safari中的问题,但在Firefox中,我看到输出事件在超时80(!)之后解决.所以纯粹基于时间的方法显然不会做我想要的.

简单地将一个包裹setTimeout ... 0在另一个内部也不够.(我希望第一次超时会在输入事件排队后触发,第二次超时会在解决之后触发.没有这样的运气.)也没有添加第三或第四级别的嵌套就足够了(参见下面的更新2) ).

所以,如果有人有办法实现我所描述的(除了设置90+毫秒的超时),我将非常感激.或者使用当前的JavaScript事件模型这是不可能的？

这是我最新的JSFiddle测试平台:http://jsfiddle.net/EJNSu/7/

更新2:部分解决方法是嵌套func2在两个超时内,在第一个超时中删除所有输入事件处理程序.但是,这会产生令人遗憾的副作用,导致func1无法解决期间发生的某些甚至所有输入事件.(前往http://jsfiddle.net/EJNSu/10/并尝试快速点击链接几次以观察此行为.警报会告诉您有多少次点击？)所以这再一次让我感到惊讶; 我不认为调用setTimeout func2, 0,func2设置onclick为null,可以阻止回调运行以响应一整秒前发生的点击.我想确保所有输入事件都会触发,但我的函数会在它们之后触发. …

所以我有这段代码循环遍历数组并加载图像并在加载图像时通知.

for (var i = 0; i < arr.length; i++) {                
    var imageObj = new Image();
    imageObj.src = url[i];
    imageObj.onload= (function(i){
                return function(){
                    console.log(i, 'loaded');
                }
            })(i);

}

它工作正常.但是,如果我尝试这样做,它将无法正常工作

imageObj.addEventListener('onload', function(
    console.log(i, 'loaded');
}, false);

问题是什么？在这种情况下,我有什么方法可以避免使用闭包吗？

我的目标是使用C库来构建Web应用程序.

我已经通过使用"SWIG"工具选择了这样做的方法.Swig工具需要三件事

1) .c file which defines all the functions.

2) .i file also called interface file which is creating the
interface to load the APIs wherin I used the extern keyword.

3) APP written in javascript extension (.js file).

我使用SWIG工具编译并运行此应用程序以验证.js文件是否正确.应用程序在XMING X11窗口上运行正常.

在编译时,它创建_wrap.o,.o文件和libFILENAME.so

现在我想在浏览器页面上运行此应用程序.

为此,我使用了webkit杂乱端口,它为我们提供了MxLauncher代码.我正在使用webkit_iweb_view_load_uri(WEBKIT_IWEB_VIEW(view),"filename.html"); 用于加载我的html文件以在我的网页视图上运行该javascript的API.

我正在编译在编译时创建的.so.

错误消息:JS CONSOLE:file:///filename.js:ReferenceError:找不到变量:example

FILENAME.C

int gcd(int x, int y) `enter code here`{
  int g;
  g = y;
  while (x > 0) {
    g = x;
    x = y % x;
    y …

所以,我有一个角度形式,其提交方法被击中两次,我无法弄清楚为什么.我对Angular很新,所以我可能会忽略一些相当简单的事情......

HTML:

<div ng-app="RegistrationApp" ng-controller="RegistrationController">
    <form name="accountForm" ng-submit="submitAccount($event, accountForm, account)"  novalidate>

        // inputs here...

        <button type="submit" class="btn btn-success pull-right" ng-disabled="accountForm.$invalid">Submit</button>
    </form>
</div>

JS:

var RegistrationApp = angular.module('RegistrationApp', []);

RegistrationApp.controller('RegistrationController', function ($scope) {

    $scope.submitAccount = function (evt, form, account) {
        console.log('submitAccount() hit'); 
        console.log(evt);
        console.log(form);

        evt.stopPropagation();

        // AJAX code
    });
});

控制台窗口:

submitAccount() hit 
o.Event {originalEvent: Event, type: "submit", isDefaultPrevented: function, timeStamp: 1394139847226, jQuery210012237170152366161: true…}
c {$error: Object, $name: "accountForm", $dirty: true, $pristine: false, $valid: true…}

submitAccount() hit 
o.Event {originalEvent: Event, type: …