189 8069 5689
1、jquery.autocomplete详解 语法： autocomplete(urlor data, [options] ) 参数： url or data：数组或者url [options]：可选项，选项解释如下： 1) minChars (Number) 在触发autoComplete前用户至少需要输入的字符数，Default:1，如果设为0
创新互联专注于达茂旗网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供达茂旗营销型网站建设，达茂旗网站制作、达茂旗网页设计、达茂旗网站官网定制、小程序设计服务，打造达茂旗网络公司原创品牌,更为您提供达茂旗网站排名全网营销落地服务。
大多数情况下我们使用左键来进行页面交互，而右键大部分对于开发者来说是审查元素的，有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性，常见的有漫画左键前进、右键后退。
第一步我们要屏蔽浏览器默认的右键点击行为，即阻止弹出框。
首先要将阻止弹出函数绑定到目标元素上：
//阻止浏览器默认右键点击事件
$("div").bind("contextmenu",
function(){
return
false;
})
如此一来，div元素的右击事件就被屏蔽了，而浏览器其他区域不受影响，如果你想在整个页面屏蔽右击事件，只需这样做：
document.oncontextmenu
=
function()
{
return
false;
}
接下来就可以为元素绑定右击响应函数了：
$("div").mousedown(function(e)
{
console.log(e.which);
//右键为3
if
(3
==
e.which)
{
$(this).css({
"font-size":
"-=2px"
});
}
else
if
(1
==
e.which)
{
//左键为1
$(this).css({
"font-size":
"+=3px"
});
}
})
示例效果为右击字体缩小，左击字体变大，且其它区域可以响应默认右击事件。
完整代码：
head
style
type="text/css"
div{
font-size:20px;
}
/style
script
src="../jquery.js"/script
script
$(function()
{
//阻止浏览器默认右键点击事件
/*document.oncontextmenu
=
function()
{
return
false;
}*/
//某元素组织右键点击事件
$("div").bind("contextmenu",
function(){
return
false;
})
$("div").mousedown(function(e)
{
console.log(e.which);
//右键为3
if
(3
==
e.which)
{
$(this).css({
"font-size":
"-=2px"
});
}
else
if
(1
==
e.which)
{
//左键为1
$(this).css({
"font-size":
"+=3px"
});
}
})
})
/script
/head
body
div
div
/div
/body
以上这篇jQuery自定义元素右键点击事件(实现案例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
两个地方需要说明
$.fn.xxx 中的 this 指向的是 $() 调用时的 jQuery 对象，不用再通过$来封装；
$.fn.longPress 中，如果要调用参数里的 fn，并且正确传递DOM对象的话，需要写成类似以下这样：
$.fn.longPress = function(fn) {
...
this.each(function() {
fn.apply(this /*, 其它参数 */ );
});
};
用 apply 方法来替换回调函数fn中的 this 。
具体来说，在setTimeout的时候，可以类似这么调用：
timeout = setTimeout(function() {
fn.apply($temThis[i]);
}, 800);
这样，在 fn() 中的this就变成当前DOM对象了。
但是，这样写还有一个重要问题，那就是变量 i ，它的值在当前闭包环境中会变成 $temThis.length ，导致代码出错。要正确工作，需要改成这样：
for(var i = 0; i $temThis.length; i++) {
(function(target) {
var timeout;
target.addEventListener('touchstart', function(event) {
timeout = setTimeout(function() {
fn.apply(target);
}, 800);
}, false);
target.addEventListener('touchend', function(event) {
clearTimeout(timeout);
}, false);
})($temThis[i]);
}
这样创建一个闭包，确保$temThis[i]在每个闭包中都是正确的。另外注意那个timeout，由于对象可能有多个，因此每个对象需要一个单独的 timeout 。
使用 jQuery 的方法会简化一些，含义是一样的，如下：
$temThis.each(function() {
var timeout, target = this;
this.addEventListener('touchstart', function(event) {
timeout = setTimeout(function() {
fn.apply(target);
}, 800);
}, false);
this.addEventListener('touchend', function(event) {
clearTimeout(timeout);
}, false);
});
用两种方式：
build.click(function() {
buildforsel(this);
});
build.click(function(e) {
buildforsel(e.target);
});
本文实例讲述了jQuery实现获取绑定自定义事件元素的方法。分享给大家供大家参考，具体如下：
(function
($)
{
//
自定义itemtab事件
$.fn.bind
=
function(types,
data,
fn)
{
//
重载jQuery.fn.bind方法，用来截获绑定自定义事件的元素
if(typeof
types
==
'string'
'itemtab'
==
types)
{
var
itemTouchStart
=
-1;
//
touchstart位置
var
itemTouchMove
=
-1;
//
touchend位置，值为-1时表示未触发
var
itemTriggerDistance
=
0;
//
拖动距离阀值，若大于该值则为拖动列表，若小于等于该值则为点击列表项
var
itemMoved
=
false;
//
列表是否为拖动状态
$(this).bind('touchstart',
function
(event)
{
if(!event.originalEvent.touches.length)
return
true;
itemMoved
=
false;
itemTouchStart
=
event.originalEvent.touches[0].pageX;
//
记录起始位置
}).bind('touchmove',
function
(event)
{
if(!event.originalEvent.touches.length)
return
true;
itemTouchMove
=
event.originalEvent.touches[0].pageX;
//
当前拖动位置
//console.log('touchmove:',
itemTouchStart,
itemTouchMove,
itemMoved);
if(Math.abs(itemTouchMove
-
itemTouchStart)
itemTriggerDistance)
{
itemMoved
=
true;
//
列表被拖动
}
}).bind('touchend',
function
(event)
{
//console.log('itemMoved:',
itemMoved);
if(itemMoved)
{
//
列表被拖动过，非点击操作
return
true;
}
$(this).trigger('itemtab');
//
触发自定义事件
});
}
return
this.on(
types,
null,
data,
fn
);
//
这种做法具有侵入性，多个类似的代码会相互覆盖，可采用深度复制方式调用原$.fn.bind方法
}
})(jQuery);
希望本文所述对大家jQuery程序设计有所帮助。
类似 DOM 的行为：你在 DOM 节点（包括 document 对象）监听并触发自定义事件。这些事件既可以冒泡，也可以被拦截。这正是 Prototype、jQuery 和 MooTools 所做的。如果事件不能扩散，就必须在触发事件的对象上进行监听。
命名空间：一些框架需要你为事件指定命名空间，通常使用一个点号前缀来把你的事件和原生事件区分开。
自定义额外数据：JavaScript 框架允许你在触发自定义事件时，向事件处理器传送额外的数据。jQuery 可以向事件处理器传递任意数量的额外参数。
通用事件 API：只用 Dojo 保留了操作原生 DOM 事件的正常API。而操作自定义事件需要特殊的发布/订阅 API。这也意味着 Dojo 中的自定义事件不具有DOM事件的一些行为（比如冒泡）。
声明：我们往往需要在预定义的事件中加入一些特殊的变化（例如，需要Alt键按下才能触发的单击事件），MooTools 运行你定义此类自定义事件。此类事件需要预先声明，即便你只是声明他们的名字。任何未声明的自定义事件不会被触发。
理论太抽象，看看 jQuery 框架中如何使用事件。
jQuery 的事件自定义事件还是通过 on 绑定的，然后再通过 trigger 来触发这个事件。
//给element绑定hello事件
element.bind("hello",function(){
alert("hello world!");
});
//触发hello事件
element.trigger("hello");
这段代码这样写似乎感觉不出它的好处，看了下面的例子也许你会明白使用自定义事件的好处了，参考右边的代码。
trigger需要处理的问题
模拟事件对象，用户模拟处理停止事件冒泡(因为不是通过浏览器系统触发的，而是自动触发的，所以这个事件对象要如何处理？)
区分事件类型，触发标准的浏览器事件 和 自定义事件名绑定的处理程序。
拟冒泡机制
当事件是 click 类型，自然是本身支持冒泡这样的行为，通过 stopPropagation 阻止即可
当然一些事件，如 focusin 和 blur 本身不冒泡，但 jQuery 为了跨浏览器一致性， jQuery 需要在这些事件上模拟了冒泡行为，jQuery 要如何处理？
那么如果是自定义的aaa的事件名，又如何处理冒泡？
ul id="tabs"
li data-tab="users"Users/li
li data-tab="groups"Groups/li
/ul
div id="tabsContent"
div data-tab="users"part1/div
div data-tab="groups"part2/div
/div
script type="text/javascript"
$.fn.tabs = function(control) {
var element = $(this);
var control = $(control);
element.delegate("li", "click", function() {
var tabName = $(this).attr("data-tab");
//点击li的时候触发change.tabs自定义事件
element.trigger("change.tabs", tabName);
});
//给element绑定一个change.tabs自定义事件
element.bind("change.tabs", function(e, tabName) {
element.find("li").removeClass("active");
element.find("[data-tab='" + tabName + "']").addClass("active");
});
element.bind("change.tabs", function(e, tabName) {
control.find("[data-tab]").removeClass("active");
control.find("[data-tab='" + tabName + "']").addClass("active");
});
// 激活第一个选项卡
var firstName = element.find("li:first").attr("data-tab");
element.trigger("change.tabs", firstName);
return this;
};
$("ul#tabs").tabs("#tabsContent");
/script